[JS]笔记15之客户端存储cookie

-->本地存储发展情况

-->什么是cookie
-->cookie优缺点
-->cookie的设置、读取、删除
-->cookie应用

本地存储发展情况

一、什么是cookie

1、什么是cookie

cookie是存储于访问者计算机中的变量
cookie是浏览器提供的一种机制，可以由JavaScript对其进行操作(设置、读取、删除)

2、cookie的特性

cookie可以实现跨页面全局变量
cookie可以跨越同域名下的多个网页，但不能跨域使用
同一个网站中所有页面共享一套cookie
可以设置有效期限
存储空间为4KB左右

二、cookie优缺点

1、cookie的优点
cookie可以跨越同域名下的多个网页使用
cookie可以实现跨页面全局变量
同一个网站中所有页面共享一套cookie
可以设置有效期限

cookie机制将信息存储于用户硬盘，因此可以作为跨页面全局变量，这是它最大的一个优点
常用场合：（1）保存用户登录状态；（2）跟踪用户行为；（3）定制页面；（4）创建购物车 ...等等

2、cookie的缺点

（1）cookie可能被禁用；
（2）cookie与浏览器相关，不能互相访问；
（3）cookie可能被用户删除；
（4）cookie安全性不够高；
（5）cookie存储空间很小(只有4KB左右)
（6）cookie操作麻烦，没有方便的API

三、cookie的设置、读取、删除

1、Cookie设置
每个cookie都是一个名/值对(key=value)格式的字符串
例如： document.cookie="user1=YY";
如果要改变一个cookie的值，只需重新赋值
例如： document.cookie="user1=QQ";

设置有效期：
var dates=new Date();
dates.setDate(dates.getDate()+3); //按天数设置
document.cookie="user1=YY; expires="+dates;

2、读取cookie
document.cookie="user1=YY";
document.cookie="user2=MM";
var cookies=document.cookie; //获取
alert(cookies);
返回："user1=YY; user2=MM"
只能够一次获取所有的cookie值
用户必须自己解析这个字符串，来获取指定的cookie值
split() 方法用于把一个字符串分割成字符串数组

3、cookie值编码处理
在cookie 的名或值中不能使用分号（;）、逗号（,）、
等号（=）以及空格等特殊符号。在cookie的名中做到这点很容易，但要保存的值可能是不确定的。

用escape( )函数进行编码，它能将一些特殊符号使用十六进制表示，从而可以存储于cookie值中

当使用escape( )编码后，在取出值以后需要使用unescape( )进行解码才能得到原来的cookie值。

4、删除cookie
cookie过期会自动消失
要删除一个cookie，可将其有效期设为一个过去的时间

例如：

var date=new Date();

dates.setDate(dates.getDate()-1);

document.cookie="user1=YY; expires="+dates;

cookie设置、获取、删除及编码处理代码练习：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>setCookie&getCookie&rmCookie</title>
 6 </head>
 7 <body>
 8     <h1 id="con">注！！在服务器中打开看效果</h1>
 9 <script>
10 /*cookie设置*/
11     var con=document.getElementById('con');
12     document.cookie='user1=喽喽';
13     document.cookie='user2=康康';
14     document.cookie='user3=YY';
15     document.cookie='user4=QQ';
16     //设置有效期
17     var dates=new Date();
18     dates.setDate(dates.getDate()+7);
19     document.cookie='user1=小楼欧;expires='+dates;
20 /*setCookie-设置cookie值--封装函数*/
21     function setCookie(key,val,Days){
22         var dates=new Date();
23         dates.setDate(dates.getDate()+Days);
24         document.cookie=key+'='+escape(val)+';expires='+dates;
25     }
26     setCookie('user5','set函数1',20);
27     setCookie('user6','set;函,数9890=1',20);
28 /*cookie读取*/
29     //1、一次获取所有的cookie值
30     var cookies=document.cookie;
31     console.log(cookies);//user=YY; user2=康康; user3=YY; user4=QQ; user1=小楼欧; user5=函数1
32     //2、必须自己解析这个字符串，来获取指定的cookie值
33     var arr=cookies.split('; ');
34     console.log(arr);//["user=YY", "user2=康康", "user3=YY", "user4=QQ", "user1=小楼欧", "user5=函数1"]
35     var arr2=arr[4].split('=');
36     console.log(arr2);//["user1", "小楼欧"]
37     console.log(arr2[1]);//小楼欧
38 /*getCookie--获取cookie值--封装函数*/
39     function getCookie(key){
40         var arr=document.cookie.split('; ');//获取所有的cookie值
41         for (var i = 0; i < arr.length; i++) {
42             var arr2=arr[i].split('=');//["user1", "小楼欧"]
43             if (arr2[0]==key) {
44                 return unescape(arr2[1]);
45             } 
46         }
47         return false;//没有返回false
48     }
49     console.log(getCookie('user2'));//康康
50     console.log(getCookie('user6'));//set;函,数9890=1
51 /*rmCookie--删除cookie--封装函数*/
52     var date2=new Date();
53     date2.setDate(date2.getDate()-1);
54     document.cookie='user4=11;expires='+date2;
55     function rmCookie(key){
56         setCookie(key,'0',-1);
57     }
58     rmCookie('user2');
59 </script>
60 </body>
61 </html>

效果笔记：https://www.cnblogs.com/duenyang/