第一种方式：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的优化与购物车实例就是小编分享给大家的全部内容了，希望能给大家一个参考
第一种方式：cookie的优化与购物车实例的更多相关文章
- Unity 人物跟谁手指的移动(第一种方式)
长夜漫漫无心睡眠,敲敲代码,越敲越来劲! 我发现好多小朋友都在玩熊出没之xxxx这个游戏,居然打了一下午都没玩通第2关,我把测试也叫来陪我一起玩! 结果他也打不通,我再去叫策划,他也没打过,我去叫主管 ...
- UserView--第二种方式（避免第一种方式Set饱和），基于Spark算子的java代码实现
UserView--第二种方式(避免第一种方式Set饱和),基于Spark算子的java代码实现 测试数据 java代码 package com.hzf.spark.study; import ...
- 创建多线程的第一种方式——创建Thread子类和重写run方法
创建多线程的第一种方式——创建Thread子类和重写run方法: 第二种方式——实现Runnable接口,实现类传参给父类Thread类构造方法创建线程: 第一种方式创建Thread子类和重写run方 ...
- Struts2框架的数据封装一之属性封装（属性封装的第一种方式：对参数进行封装）
request带着参数来,aciton对其进行处理.在学习action之前,使用的是servlet对request进行处理.request请求时会带有参数,所以我们要对这些参数进行封装. 1. 为什么 ...
- Spring整合Struts2框架的第一种方式（Action由Struts2框架来创建）。在我的上一篇博文中介绍的通过web工厂的方式获取servcie的方法因为太麻烦，所以开发的时候不会使用。
1. spring整合struts的基本操作见我的上一篇博文:https://www.cnblogs.com/wyhluckdog/p/10140588.html,这里面将spring与struts2 ...
- 创建多线程程序的第一种方式_创建Thread类的子类
创建多线程程序的第一种方式:创建Thread类的子类java.lang.Thread类:是描述线程的类,我们想要实现多线程程序,就必须继承Thread类 实现步骤: 1.创建一个Thread类的子类 ...
- throws关键字_异常处理的第一种方式(交给别人处理)和try_catch_异常处理的第二种方式(自己处理)
throws关键字:异常处理的第一种方式,交给别人处理 作用: 当方法内部抛出异常对象的时候,那么我们就必须处理这个异常对象 可以使用throws关键字处理异常对象, 会把异常对象声明抛出给方法的调用 ...
- COOKIE的优化与购物车小试
由于经常被抓取文章内容,在此附上博客文章网址:,偶尔会更新某些出错的数据或文字,建议到我博客地址 : --> 点击这里 一 Cookie 的优化 1.1 一般而言,我们设置cookie是在ph ...
- 主线程和创建多线程程序的第一种方式_创建Thread类的子类
/** * 主线程:执行主方法的线程(main) * 单线程程序:在java程序中只有一个线程 * 执行从main方法开始,从上倒下依次执行 */ public class Demo01MainThr ...
随机推荐
- Vue源码探究-数据绑定的实现
Vue源码探究-数据绑定的实现 本篇代码位于vue/src/core/observer/ 在总结完数据绑定实现的逻辑架构一篇后,已经对Vue的数据观察系统的角色和各自的功能有了比较透彻的了解,这一篇继 ...
- JS判断PC 手机端显示不同的内容
方法一: function goPAGE() { if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android ...
- java 使用 POI 操作 XWPFDocumen 创建和读取 Office Word 文档基础篇
注:有不正确的地方还望大神能够指出,抱拳了 老铁! 参考 API:http://poi.apache.org/apidocs/org/apache/poi/xwpf/usermodel/XWPFDoc ...
- iOS app发布流程
http://www.xuebuyuan.com/1980497.html http://blog.csdn.net/alincexiaohao/article/details/38725367 ap ...
- Codeforces 336C
这题是大一暑假时候做的,当时没有出,直到今天突然觉得应该把没过的题目再做一边,不然真的是越积越多. 现在能够独立做出来真的是难以表达的兴奋,刚开始的时候就觉得 O(30 * 30 * n)的复杂度有点 ...
- win7 powershell版本过低问题
那台win8系统的笔记本电脑 硬盘坏掉后 在win7系统的台式机上使用 vagrant up 提示版本过低 The version of powershell currently installed ...
- 设置onselectstart在ie浏览器下对于input及textarea标签页会生效
设置onselectstart在ie浏览器下对于input及textarea标签页会生效, 可以使用js来控制对于某种标签不生效,代码如下: document.onselectstart = disa ...
- CSDN编程挑战——《-3+1》
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/user_longling/article/details/24674033 -3+1 题目详情: 有 ...
- framework7日期插件使用
1.引入框架文件 <link rel="stylesheet" href="framework7.ios.min.css"> <link re ...
- QT_OPENGL-------- 2.shader
用可编程管线绘制一个三角形 1.以上一节window为基准,进行绘制. 2.下载编译glew,并在.pro添加动态链接,并在头文件中引用. LIBS +=-L/usr/lib64 -lGLEW 可能根 ...