cookie的优化与购物车实例

一 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的优化与购物车实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • php利用cookies实现购物车的方法

    本文实例讲述了php利用cookies实现购物车的方法.分享给大家供大家参考.具体分析如下: php购物车是在电子商务网站会用到的,一种像超市购物车一样的,选好商品了,先放到自己的购物车里面等好了再到柜台结算,本款php购物车完全按照这个原理来实例的,感兴趣的朋友可以来看看,该实例利用了cookie来实现,代码如下: 复制代码 代码如下: <?php /**  * 购物车类 cookies 保存,保存周期为1天 注意:浏览器必须支持cookie才能够使用  */ class cartapi {

  • cookie的优化与购物车实例

    一 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['

  • jquery.cookie实现的客户端购物车操作实例

    本文实例讲述了jquery.cookie实现的客户端购物车操作.分享给大家供大家参考,具体如下: //购物车 var Cart = function () { this.Count = 0; this.Total = 0; this.Items = new Array(); }; //购物车集合对象 var CartItem = function () { this.Id = 0; this.Name = ""; this.Count = 0; this.Price = 0; }; /

  • jQuery基于cookie实现的购物车实例分析

    本文实例讲述了jQuery基于cookie实现的购物车.分享给大家供大家参考,具体如下: 这里分析了jquery购物车原理,包括添加商品及数量到购物车 cookie 中,判断购物车中有无商品,如果有,则把json字符串转换成对象,返回当前商品在 cookie 中的总数. 将商品放入购物车: $(function(){ $(".tc").hide(); var PId = $("#hfPId").val(); // 商品的ID var PName = $("

  • Java性能优化之数据结构实例代码

    -举例(学生排课)- 正常思路的处理方法和优化过后的处理方法: 比如说给学生排课.学生和课程是一个多对多的关系. 按照正常的逻辑 应该有一个关联表来维护 两者之间的关系. 现在,添加一个约束条件用于校验.如:张三上学期学过的课程,在排课的时候不应该再排这种课程. 所以需要出现一个约束表(即:历史成绩表). 即:学生选课表,需要学生成绩表作为约束. -方案一:正常处理方式- 当一个学生进行再次选课的时候.需要查询学生选课表看是否已经存在. 即有如下校验: //查询 学生code和课程code分别为

  • AngularJs 终极购物车(实例讲解)

    废话不多说,直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购物车</title> <script src="angularjs/angular.js"></script> <style> .box{ width: 100%; bord

  • Vue实现购物车实例代码两则

    一.第一种比较简单 效果图 实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-

  • scrapy框架携带cookie访问淘宝购物车功能的实现代码

    scrapy框架简介 Scrapy是用纯Python实现一个为了爬取网站数据.提取结构性数据而编写的应用框架,用途非常广泛 框架的力量,用户只需要定制开发几个模块就可以轻松的实现一个爬虫,用来抓取网页内容以及各种图片,非常之方便 scrapy架构图 crapy Engine(引擎): 负责Spider.ItemPipeline.Downloader.Scheduler中间的通讯,信号.数据传递等. Scheduler(调度器): 它负责接受引擎发送过来的Request请求,并按照一定的方式进行整

  • jQuery基于cookie实现换肤功能实例

    本文实例讲述了jQuery基于cookie实现换肤功能.分享给大家供大家参考,具体如下: 换肤,在你使用QQ.浏览器.酷狗等软件时,总是能看到这两个字(也有叫皮肤).不过换肤的确能解决很多人的口味,换肤看似一个无关紧要的功能,但其实能起到吸引用户的作用.好啦,话不多说,开始上课. 附上本人的代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh

  • php 购物车实例(申精)

    if(! $session && ! $scid) { /* session用来区别每一个购物车,相当于每个车的身份证号: scid只用来标识一个购物车id号,可以看做是每个车的名字: 当该购物车的id和session值两者都不存在时,就产生一个新购物车 */ $session = md5(uniqid(rand())); /* 产生一个唯一的购物车session号 rand()先产生个随机数,uniqid()再在该随机数的基础上产生一个独一无二的字符串,最后对该字符串进行md5 */ S

  • Javascript 对cookie操作详解及实例

    js 操作 cookie 的方法 cookie cookie,有时候也用其复数形式Cookies,指某些网站为了辨别用户身份,进行session跟踪而储存在用户本地终端上的数据(经常通过加密).定义于RFC2109和2965都已废弃,最新取代的规范是RFC6265. cookie的作用 服务器可以利用Cookie包含信息的任意性来筛选经常性维护这些信息,以判断在HTTP传输中的状态.Cookie最典型的英语是判断注册用户是否已经登录网站,用户可能会得到提示,是否在下一次进入此网站时保留用户信息以

随机推荐