1.1 一般而言，我们设置cookie是在php中设置
例如：
|
1
2
|
<?php
setcookie('testkey1','hello world',0,'/'); //# 当 expires = 0 时，此cookie随浏览器关闭而失效，?>
|
而在验证的时候，我们通常是：
|
1
2
3
4
5
6
|
<?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保存在客户端，那么可以在客户端那边进行验证，根据上面的代码，前端获取代码为：
|
1
2
3
4
5
6
7
8
|
<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【购物车原理】
|
1
2
3
4
5
6
7
|
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可以看到：
这个可以看成是浏览器的小型数据库，可以存储更多的数据。
示例【购物车小试】：
设置页面：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<!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>
|
效果：
有设置，就有查看：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<!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的优化与购物车实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持服务器之家。
原文链接：http://www.cnblogs.com/zhenghongxin/archive/2017/08/20/7401545.html