cookie的优化与购物车实例

更新时间：2017年08月21日 08:08:36 投稿：jingxian

下面小编就为大家带来一篇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的优化与购物车实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

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

PHP文件操作简单介绍及函数汇总
这篇文章主要介绍了PHP文件操作简单介绍及函数汇总,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-12-12
Laravel框架中的路由和控制器操作实例分析
这篇文章主要介绍了Laravel框架中的路由和控制器操作,结合实例形式分析了laravel框架路由和控制器相关概念、原理及基本使用方法,需要的朋友可以参考下
2019-12-12
LotusPhp笔记之:基于ObjectUtil组件的使用分析
学习要先易后难，好吧，我刚开始学习LotusPhp的时候，就是从最容易的Logger和ObjectUtil开始的，这2个组件基本没有什么难度。一看就会
2013-05-05
PHP验证码生成原理和实现
验证码在表单实现越来越多了，但是用js的写的验证码，总觉得不方便，所以学习了下php实现的验证码的原理和实现，对验证码生成原理相关知识感兴趣的朋友一起学习吧
2016-01-01
PHP获取二维数组中某一列的值集合
PHP还是比较常用的，于是我研究了一下PHP二维数组，下面通过本文给大家介绍PHP获取二维数组中某一列的值集合，对php数组二维数组的值相关知识感兴趣的朋友一起学习吧
2015-12-12
phpStorm2020 注册码
本文给大家分享phpStorm2020 注册码的相关知识，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
2020-09-09
微信小程序发送订阅消息的方法(php 为例)
小程序订阅消息公测已经有些日子，今天以世界上最好的语言（PHP）为例，说一下如何发送订阅消息。感兴趣的朋友跟随小编一起看看吧
2019-10-10
php实现图形显示Ip地址的代码及注释
这篇文章主要介绍了php实现图形显示Ip地址，有需要的朋友可以参考一下
2014-01-01
Vagrant(WSL)+PHPStorm+Xdebu 断点调试环境搭建
这篇文章主要介绍了Vagrant(WSL)+PHPStorm+Xdebu 断点调试环境搭建,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-12-12
Yii2实现让关联字段支持搜索功能的方法
这篇文章主要介绍了Yii2实现让关联字段支持搜索功能的方法,结合实例形式分析了Yii2关联字段搜索功能的原理与相关实现技巧,需要的朋友可以参考下
2016-08-08