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' }
这样子能够减轻服务器的压力
我们要注意,这样子是有限制的,浏览器本身能够存储的数据有限:
上述是从网上找来,仅供参考,如果我们要存储更多的数据。可以使用:
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] + "\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的优化与购物车实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
下一篇: java 中函数的参数传递详细介绍