Cookie

1网络知识（了解）

1.1通信协议

通信规则，设备与设备之间通信时共同遵守的规则。

1.2 TCP/UDP/IP

1.IP： Internet Protocol（网络之间互连的协议），规定了计算机在因特网上进行通信时应当遵守的规则:

· IP地址：4个字节,一共32位 ，用来标识设备在网络中的位置；

· 子网掩码: 255.255.255.0 确认两台计算机是否处于同一网段。

2.TCP：Transmission Control Protocol（传输控制协议）,TCP面向连接的协议（通信之前必须先建立连接）,TCP相对可靠，它建立连接的过程称为3次握手：

· 经历3次握手，才能建立连接；

· 所有的消息传送，需要对方确认送达。

3.UDP:UDP面向数据报的协议 (不可靠的协议)，如果TCP比作是打电话，那么UDP就是在发短信:

无需建立连接，发送消息也无需对方确认；

无法保证数据的发送顺序，以及准确率；

UDP通常用于视频、语音等通信（丢掉了一帧画面是无所谓的）。

1.3 http/https

超文本传输协议HyperText Transfer Protocol，基于TCP协议的一种高级协议,用于客户端和服务器直接的通信。

http的特点是，请求完成后就立即断开与服务器的连接。

缺点：通信使用明文（不加密），内容可能会被窃听；不适用特定的Web服务器，如：聊天室，消息广播。

1.4 socket

是一种通信模式，客户端与服务端一直保持着连接，用于随时传输数据。

2 cookie的概念

cookie 是客户端与服务器端进行通讯使用的一个能够在浏览器本地化存储的技术。

PS：chrome不支持本地文件的cookie读写。

2.1 cookie的应用场景

1.七天免登陆，7天内访问网站无需输入密码。

2.购物车信息，添加到购物车后，取到购物车页面，商品信息依然存在。

3.商品浏览记录，用户每浏览一个商品就会保留商品的浏览记录。

3 cookie的组成

cookie由键值对形式的文本组成，完整格式如下：

document.cookie = name=value[;expires=date][;path=路径][;domain=域名]

//[]表示该值是可选。

3.1 name = value

name=value: 为你要保存的键值对(必选)。

利用decodeURI解码中文字符；

利用json保存多条信息。

3.2 expires = date

expires=date: 表示cookie的失效时间,默认是浏览器关闭时失效(可选)。

//设置7天内生效的cookie

var date = new Date();  

date.setDate(date.getDate() +7);

document.cookie = "user=laoxie;expires=" + date.toUTCString();

3.3 path = 路径

path=路径:访问路径,默认为当前文件所在目录(可选)，cookie只能在设置的路径及它的子目录下使用。

3.4 domain = 域名

domain=域名:访问域名,限制在该域名下访问(可选)，没有设置则默认为当前域名。

4 cookie的操作

4.1 cookie的获取和操作

4.1.1 cookie的设置

document.cookie = 'name=laoxie';

document.cookie = 'myAge=18';

document.cookie = 'test=hello';

一次只能写入一个cookie。

4.1.2 cookie的获取

var cookies = document.cookie;

Console.log(cookies)结果为：

‘username=laoxie; password=123456; myName=laoxie; myAge=18; test=hello’，为字符串。

获取时得到所有cookie，多个cookie之间用分号+空格（‘; ’）来隔开。

4.1.3 cookie的数据提取

var arr_cookie = cookies.split('; '); //将字符串转为数组

arr_cookie.forEach(function(item){ //对数组进行遍历

// 以等号拆分cookie的name/value

var temp = item.split('=');//['myName','laoxie'];

If(temp[0].toLowerCase === ‘name’){

var a1 = temp[1];

//通过对属性名的操作可以提取出属性值

});

4.1.4  JSON字符串

json字符串：

* 属性名必须使用双引号

* 不能有注释

* 不能用多余的逗号

* 属性值必须为以下类型

* String (字符串必须使用双引号)

* Number

* Boolean

* Array

* Object

* Null

*JSON.stringify() 把js中的对象/数组转成“json字符串”。

JSON.parse() json字符串=>js对象/数组。

案例（将json字符串转换为数组）：

var cookies = document.cookie;

console.log(cookies)

// 因为cookie中可能有其他数据，首先将cookies字符串转换为数组，而cookie中每个数据之间的间隔为‘,’

cookies = cookies.split('; ')

var carlist=[];

// 通过遍历循环删除掉其他无关的cookie数据

cookies.forEach(function(cookie){

var temp = cookie.split('=');

//判定条件为属性名

if(temp[0] === 'carlist'){

// 提取出属性值，通过JSON.parse()直接将获得的字符串转换为数组

cookies = JSON.parse(temp[1]);

}

})

4.1.5 cookie中数据的期限

没有进行对expires属性进行赋值的话，cookie为临时cookie,关闭浏览器后失效。

var date = new Date();

date.setDate(date.getDate()+7);

document.cookie = 'username=' + _username + ';expires=' + date.toString();

document.cookie = 'password=' + _password + ';expires=' + date.toString();

先创建当前时间，更改当前时间的日期，对cookie的expires赋值，value为更改的时间。

4.2 cookie的删除

利用设置过期时间达到删除的效果。

var date = new Date();

date.setDate(date.getDate()-7);

document.cookie = 'username=xx;expires=' + date.toString();

document.cookie = 'password=xx;expires=' + date.toString();

对cookie的expires设置一个过期的时间，由于name=value为必填，所以可以随意赋值。

4.3 cookie的封装

封装cookie的增删改查。