简述Cookie

在使用网站时，是否遇过打开以前登录过的登录页面，账号已经自动填充；微博写文章时不小心关闭页面再打开，之前书写的内容还在；之前看到一半的视频重新打开后继续播放...这些功能的实现就需要本地储存，即常说的Cookie，以及H5中新提供的localstorage/sessionstorage。

JS里的Cookie

首先了解其特性：

1. 在服务环境下；
2. 存储在用户的本地机器上（临时且不安全）；
3. 过期时间：默认session——会话期间有效，在会话结束、浏览器关闭后消失；
4. 容量：4K左右，有些浏览器甚至有条数限制；
5. 格式：其值均保存为string类型。

保存Cookie

  document.cookie = `${name} = ${value}; path = /; expires = ${time}`;
  //name——名称;value——内容;path——保存路径;expires——过期时间

需要注意的是

1. path保存的路径最好指定为/，意指根目录，通常一个网站只用一套Cookie，而path在默认保存到当前目录时，子级能读取上级目录的Cookie，而上级目录却无法读取子级的Cookie；
2. value，既然Cookie里存的都是字符串，那么存的时候就明确的写成字符串，避免系统做对应的类型转换，另外，Cookie里不能存中文，若需要则进行转码；
3. expires的值为一个日期对象，但是Cookie里保存的数据类型为string，所以我们需要一个方法保存这种格式：

oDate.toUTCString();

读取Cookie

同样是document.cookie，但此时读取的Cookie包含所有内容，若需要单独某条，就需要字符串方法进行处理：

function getCookie(name){
    var arr = document.cookie.split('; ');
    for(var i = 0; i < arr.length; i++){
        var arr2 = arr[i].split('=');
        if(name == arr2[0]){
            return arr2[1];
        }
    }
    return '';
}

修改与删除

修改Cookie的话通过再次添加同名Cookie就行了；
删除Cookie可以直接去浏览器设置里清除浏览器数据最为暴力，也可以在控制台寻找Cookie栏右键删除选中数据，若要代码实现的话，可以修改其过期时间，这意味着其值可以是过去的时间。

JQuery插件jquery.cookie.js

保存Cookie的方法为：

  $.cookie(`${name}`, `${value}`,{
        expires:1,
        path:`/`
    })

需要注意的是：

1. 根据Cookie数据类型为string的特性，如保存数据为json时，应写为'{a: 1, b: 2}'，若是{a: 1, b: 2}，读取则为'object object'；
2. 这里指定天数，会与正常时间相差8小时，其值也能设置为日期对象，另外，天数可以为设置为负数，即删除该条Cookie。
3. 其他用法与原生相似。

Cookie与LocalStorage

H5新提供的LocalStorage与SessionStorage比起Cookie有了更多新的特性，在用法上也有不少差异，而且由于是H5的新内容所以只兼容IE8及以上版本浏览器，所以两者在实际运用中各有其优势。