Cookie是一些数据，用于存储页面的一些信息，存储在你电脑文本文件中，由于HTTP请求是无状态的，不会记录用户信息，Cookie有助于服务端获取用户信息，保存某种状态。

1.通过document.cookie创建

通过document对象的cookie创建cookie，并添加过期时间（默认浏览器关闭时删除），并添加cookie路径（默认属于当前页面）

document.cookie="name=jode; expires=Thu, 18 Dec 2018 12:00:00 GMT; path=/";

通过document.cookie读取整个cookie，以字符串的方式返回，类似：cookie1=value;cookie2=value

修改cookie只需要重新设置，原来值将被覆盖，这样达到修改的目的。

删除cookie只需要把过期时间设置为当前时间之前，过期的cookie将删除。

2.JavaScript示例，设置cookie函数

参数
key: 设置cookie键名
val: 设置cookie值
exday: 过期时间、天

1
2
3
4
5
6
function setCookie(key, val, exday){
  var date = new Date();
  date.setTime(date.getTime() + (exday*24*60*60*1000));
  var expires = 'expires=' + date.toGMTString();
  document.cookie = key + '=' + val + ';' + expires;
}

3.JavaScript示例，获取cookie值函数

参数
key: cookie键名

1
2
3
4
5
6
7
8
function getCookie(key){
  var name = key + '=';
  var arr = document.cookie.split(';');
  for(var i = 0; i < arr.length; i++){
  	var cok = arr[i].trim();
  	if(cok.indexOf(name) == 0) return cok.substring(name.length, cok.length);
  }
  return '';

4.JavaScript示例，删除cookie值函数

参数
key: cookie键名

1
2
3
4
5
function delCookie(key){
  var date = new Date();
  date.setTime(date.getTime()-1000);
  document.cookie = key + "=v; expires =" + date.toGMTString();
}

5.对比localStrong和sessionStrong

| 特性 | Cookie | localStrong | sessionStrong |
| -------- | ----- | ---- |
| 数据的声明周期 | 一般由服务器生成，可设置失效时间。如果在浏览器生成，默认是关闭浏览器之后失效 | 除非被清楚，否则永久保存 | 仅在当前会话有效，关闭页面或浏览器后被清除 |
| 存放数据大小 | 4KB | 一般5MB | 一般5MB |
| 与服务端通信 | 每次都会携带在HTTP头中，如果使用 cookie 保存过多数据会带来性能问题 | 仅在客户端中保存，不参与和服务器的通信 | 同 localStorage |
| 用途 | 一般由服务器端生成，用于标识用户身份 | 用于浏览器端缓存数据 | 同 localStorage |