欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

cookie的优化与购物车实例

程序员文章站 2024-03-11 11:19:49
一 cookie 的优化 1.1 一般而言,我们设置cookie是在php中设置 例如:

一 cookie 的优化

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

例如:

<?php
setcookie('testkey1','hello world',0,'/'); //# 当 expires = 0 时,此cookie随浏览器关闭而失效,?>

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

<?php
if(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'
}

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

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

cookie的优化与购物车实例

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

1.4 local storage

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

cookie的优化与购物车实例

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

示例【购物车小试】:

设置页面:

<!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>

效果:

cookie的优化与购物车实例

有设置,就有查看:

<!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] + "\n";
      str += "name:"+cartls[i][1] + "\n";
      str += "logo:"+cartls[i][2] + "\n";
      str += "price:"+cartls[i][3] + "\n";
      str += "num:"+cartls[i][4] + "\n";
    }
    str = decodeuricomponent(str);
    alert(str);
    document.getelementbyid('show').innerhtml=str.replace(/\n/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的优化与购物车实例

显示详细

cookie的优化与购物车实例

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