cookie的优化与购物车实例

前端之家收集整理的这篇文章主要介绍了cookie的优化与购物车实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一 Cookie 的优化

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

例如:

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

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

1.2 在前端页面进行验证cookie

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

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

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

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

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

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

1.4 local storage

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

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

示例【购物车小试】:

设置页面

Demo2

<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,gdsInfo);

}

//将JSON对象转化为JSON字符,并存入LocalStorage
localStorage.setItem(cartLSName,JSON.stringify(cartLS));
return true;
}

存储一

效果

有设置,就有查看:

Show LocalStorage Info

<script language="JavaScript" type="text/javascript">

if(!window.localStorage){
alert('您的浏览器不支持Local Storage!');
}

var cartLSName = 'abc';
var cartStr = localStorage.getItem(cartLSName)
//gdsInfo=[ID,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,"
");
}

}

function clearLS(){
localStorage.clear();
}

以字符串形式显示
显示详细
清空
返回设置页面

<div id="show">

效果

以字符串形式显示

显示详细

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

猜你在找的PHP相关文章