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>