巅云智能建站平台搭建版(创业门户版)火爆上线,终身授权!新增:文章智能采集+全站真静态打包+城市分站+智能小程序+非法词过滤+H5自适应+智能链词等功能功能详情
建站专提News

cookie的优化与购物车实例

一佰互联网站开发设计(www.yinxi.net) 发布日期 2019-04-26 09:01:51 浏览数: 171

一 Cookie 的优化

1.1 一般而言,我们设置cookie是在php中设置

例如:

<?phpsetcookie("testKey1","hello world",0,"/"); //# 当 expires = 0 时,此Cookie随浏览器关闭而失效,?>

而在验证的时候,我们通常是:

<?phpif(isset($_COOKIE["testKey2"]))  echo "The New COOKIE is : testKey2 = ".$_COOKIE["testKey2"];else  echo "The new COOKIE is setting failed";?>

都是在服务端进行。优化:

1.2 在前端页面进行验证cookie

cookie保存在客户端,那么可以在客户端那边进行验证,根据上面的代码,前端获取代码为:

<script language="JavaScript" type="text/javascript">var key1 = document.cookie.match(new RegExp("(^| )testKey1=([^;]*)(;|$)")); //正则找出testKey的cookie值try{  if(key1[2] != "")    document.write("testKey1 = "+key1[2]);}catch(e){  document.write("testKey1 = NULL");};

那么我们能否在前端设置cookie 呢 ?

1.3 在前端页面设置cookie【购物车原理】

function setCookie(){  var expire = new Date();   expire.setTime(expire.getTime() + 86400000);  document.cookie = "testKey2=This the second Cookie;expires=" + expire.toGMTString() + ";path=/";  alert("完成设置");  location.href="test2.php"}

这样子能够减轻服务器的压力

我们要注意,这样子是有限制的,浏览器本身能够存储的数据有限:

上述是从网上找来,仅供参考,如果我们要存储更多的数据。可以使用:

1.4 local storage

在谷歌浏览器下,f12可以看到:

这个可以看成是浏览器的小型数据库,可以存储更多的数据。

示例【购物车小试】:

设置页面:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Demo2</title><script language="JavaScript" type="text/javascript">var cartLSName = "abc";//gdsInfo=[ID,NAME,AVATAR,PRICE,NUMBER]function addToLS(gdsInfo){  if(!window.localStorage){    alert("您的浏览器不支持Local Storage!"); //如果不支持,可以采用第1.3中的方法    return false;  }      try{    if(gdsInfo.length != 5){      alert("参数错误!");      return false;    }  }catch(e){alert("参数错误!");return false}    var gName=gdsInfo[1];  gdsInfo[1]=encodeURI(gdsInfo[1]);  gdsInfo[4]=parseInt(gdsInfo[4]);  if(isNaN(gdsInfo[4])) gdsInfo[4] = 1;    //由JSON字符串转换为JSON对象  var cartLS = JSON.parse(localStorage.getItem(cartLSName));    if(cartLS == null){    cartLS=[gdsInfo];  }else{    var existInCart=false;    for(var i=0;i<cartLS.length;i++){      if(cartLS[i][0] == gdsInfo[0]){        cartLS[i][4] += gdsInfo[4];        existInCart = true;        break;      }    }        if(!existInCart)      cartLS.splice(0,0,gdsInfo);        }    //将JSON对象转化为JSON字符,并存入LocalStorage  localStorage.setItem(cartLSName,JSON.stringify(cartLS));  return true;}</script></head><body><a href="javascript:addToLS([3,"华为Mate8","ico.jpg",3888.00,2]);" rel="external nofollow" >存储一</a><br /></body></html>

效果:

有设置,就有查看:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Show LocalStorage Info</title><script language="JavaScript" type="text/javascript">if(!window.localStorage){  alert("您的浏览器不支持Local Storage!");}  var cartLSName = "abc";var cartStr = localStorage.getItem(cartLSName)//gdsInfo=[ID,NAME,AVATAR,PRICE,NUMBER]function showStr(){  str = decodeURIComponent(cartStr);  alert(str);  document.getElementById("show").innerHTML=str;}function showInfo(){  var cartLS = JSON.parse(cartStr);    if(cartLS == null){    alert(NULL);  }else{    var str = "";    for(var i=0;i<cartLS.length;i++){      str += "ID:"+cartLS[i][0] + "";      str += "Name:"+cartLS[i][1] + "";      str += "Logo:"+cartLS[i][2] + "";      str += "Price:"+cartLS[i][3] + "";      str += "Num:"+cartLS[i][4] + "";    }    str = decodeURIComponent(str);    alert(str);    document.getElementById("show").innerHTML=str.replace(//g,"<br />");  }  }function clearLS(){  localStorage.clear();}</script></head><body><a href="javascript:showStr();" rel="external nofollow" >以字符串形式显示</a><br /><a href="javascript:showInfo();" rel="external nofollow" >显示详细</a><br /><a href="javascript:clearLS();" rel="external nofollow" >清空</a><br /><a href="./" rel="external nofollow" >返回设置页面</a><br /><div id="show"></div></body></html>

效果:

以字符串形式显示

显示详细

以上这篇cookie的优化与购物车实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持网页设计。

一佰互联是全国知名建站品牌服务商,我们有九年网站建设、网站制作、网页设计、php开发和域名注册及虚拟主机服务经验,提供的自助建站服务更是全国有名。近年来还整合团队优势自主开发了可视化多用户”巅云建站系统“3.0平台版,拖拽排版网站制作设计,轻松实现pc站、手机微网站、小程序、APP一体化全网营销网站建设 ,已成功的为全国上百家网络公司提供自助建站平台搭建服务。

相关新闻more

02
05月
必看:网站SEO优化千万不要犯的几个错误

想必大家都知道,在网站建设完成之后,如果不想花大价钱做百度推广或者其他广告的话,做SEO是个不错的选择。但是,很多新手SEO很容易犯一些低级... >>详情

14
04月
高端网站建设过程中哪些元素容易被忽略?

重庆网站从建设到真正运营,会忽略很多元素。其实一个网站能否达到预期的效果,网站建设与网站优化做好的同时,很关键一点,客户自身的问题。比如我们... >>详情

05
04月
网站网页设计有哪些表现技巧

北京网站设计在网站建设当中作用是非常大的,首先不必要的内容就不要,没有什么特别的技巧。对于用户体验以及后期推广都有着非常大的帮助。另外一些可... >>详情

17
04月
重庆特产之大足竹编

重庆大足竹编历史悠久,花色繁多,工艺精湛,素有“竹编之乡”的美称。大足竹源丰富,竹编工艺发达,早在明崇祯十六年(16... >>详情

高端网站建设

美工兼顾SEO,为企业电子商务营销助力!

电话:

023-85725751
建站

产品

域名注册 虚拟主机 云服务器 企业邮局
智能建站 APP打包 微站/小程序 创业平台
网站推广 媒体营销 智能采集 AI机器人
400电话 短信营销 店销机器人
私人定制 门户网站