专栏首页编程乐园cookie的优化与购物车实例

cookie的优化与购物车实例

一 Cookie 的优化

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

例如:

<?php

setcookie('testKe/

/y1','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(cartLSi == gdsInfo[0]){

cartLSi += 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:"+cartLSi + "n";

str += "Name:"+cartLSi + "n";

str += "Logo:"+cartLSi + "n";

str += "Price:"+cartLSi + "n";

str += "Num:"+cartLSi + "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的优化与购物车实例就是小编分享给大家的全部内容了,希望能给大家/

/一个参考,也希望大家多多支持。

原文链接:https://www.blog.zirun.me/php/4628.html

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Jmeter购物车自动化实例

      右击Threadgroup,新建观察树ViewResultsTree(观察树是全局的,可在TestPlan下的任意地方新建)

    小老鼠
  • 京东购物小程序购物车性能优化实践

    它是小程序开发工具内置的一个可视化监控工具,能够在 OS 级别上实时记录系统资源的使用情况。

    桃翁
  • 京东购物小程序购物车性能优化实践

    它是小程序开发工具内置的一个可视化监控工具,能够在 OS 级别上实时记录系统资源的使用情况。

    WecTeam
  • 京东Java架构师讲解购物车的原理及Java实现

    1)用户没登陆用户名和密码,添加商品, 关闭浏览器再打开后 不登录用户名和密码 问:购物车商品还在吗? 

    美的让人心动
  • 基于Django的电子商务网站开发(连载25)

    购物车模块包括“购物车中所有商品的显示”“添加商品进入购物车”“删除购物车中某种商品”“删除购物车中所有的商品”和“修改购物车中某种商品的数量”。

    小老鼠
  • 干货 | 京东购物车的Java架构实现及原理!

    4)用户登陆了用户名密码,添加商品, 关闭浏览器 外地老家打开浏览器  登陆用户名和密码

    美的让人心动
  • 干货 | 京东购物车的 Java 架构实现及原理!

    Java技术栈
  • java web开发——购物车功能实现

    之前没有接触过购物车的东东,也不知道购物车应该怎么做,所以在查询了很多资料,总结一下购物车的功能实现。

    Java后端工程师
  • java web开发——购物车功能实现

    之前没有接触过购物车的东东,也不知道购物车应该怎么做,所以在查询了很多资料,总结一下购物车的功能实现。

    Java后端工程师
  • 购物车的原理及实现(仿京东实现原理)

    1)用户没登陆用户名和密码,添加商品, 关闭浏览器再打开后 不登录用户名和密码 问:购物车商品还在吗?

    Java团长
  • 购物车的原理以及实现

    用户2146856
  • 购物车的原理以及实现

    用户2146856
  • 用js+cookie实现商城的购物车功能

    <input name="buy" type="image" alt="第一个商品" src="images/buy.gif" align="middle" o...

    用户3055976
  • 购物车的原理及实现.(仿京东实现原理)

    一枝花算不算浪漫
  • 美多商城项目(八)

    It is our attitude at the beginning of a difficult task which, more than anythin...

    小闫同学啊
  • 基于Django的电子商务网站开发(连载7)

    通信中无状态协议是指同一个会话的连续两个请求互相不了解,它们由最新实例化的环境进行解析,除了应用本身可能已经存储在全局对象中的所有信息外,该环境不保存与会话有关...

    小老鼠
  • cookie的跨页面传值问题仿购物车案例

    大家都知道cookie的特性, cookie生效在同一个域名下,cookie储存量有限,cookie主要用于记录用户的一些信息,例如记录用户的登录信息使用户一段...

    王小婷
  • 谈谈HTTP状态保持

    HTTP协议本身是无状态的,无状态的意思是浏览器发起的每个HTTP请求,对于服务端而言都是彼此独立的,即服务端无法直接通过HTTP协议将用户的多次HTTP请求联...

    Bug开发工程师
  • 电商---实现购物车功能

    优点:不占用服务器资源,可以永远保存,不用考虑失效的问题 缺点: 对购买商品的数量是有限制的,存放数据的大小 不可以超过2k,用户如果禁用cookie那...

    周小董

扫码关注云+社区

领取腾讯云代金券