web存储分为cookie存储和webStorage存储
cookie存储
Cookie 是一些数据, 存放数据一般为4KB左右，存储于你电脑上的文本文件中。
当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。
一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效
// 设置cookie 设置属性：有效天数，path(可不写)
Cookies.set('name','terry',{expires: 7});
// 获取cookie
console.log(Cookies.get('name'));
// 清除cookie
Cookies.remove('name');
WebStorage存储
相应的API类型分为两种：
- sessionStorage（保存会话数据）
- localStorage（在客户端长期保存数据）
1. sessionStorage
保存数据时间非常短暂，因为该数据实质上是保存在session对象中。用户在打开浏览器时，可以查看操作过程中要求临时保存的对象，一旦关闭浏览器，所有使用sessionStorage对象保存的数据将全部丢失。
sessionStorage.getItem(key,value);
对应格式为（键名，键值）。一旦键名设置成功，则不允许修改，也不能重复，若重复，会覆盖原有的键名值。
获取数据：sessionStorage.getItem(key);
返回值一个指定键名对应的键值，如果不存在，则返回Null值。
注意：重新打开网页时，原先sessionStorage对象保存的内容会全部丢失，所以当用户直接单击“读取”时，无法读取指定键名的键值。
// 设置内容
sessionStorage.setItem('name','larry');
// 获取内容
console.log( sessionStorage.getItem('name'));
//清空内容
sessionStorage.clear('name'); //清除属性值
// 清空内容
sessionStorage.removeItem('name'); //全部清除
2.localStorage
可以将数据长期保存在客户端，直至人工消除为止。
localStorage.setItem(key,value);
获取数据：localStorage.getItem(key);
如果要清除对象保存的内容：localStorage.removeItem(key);
一旦成功，与键名对应的相应数据将全部被删除。
清除属性值localStorage.clear('key');
注意：尽管使用localStorage对象可以将数据长期保存在客户端，当在跨浏览器读取数据时，被保存的数据不可公用，即每一个浏览器只能读取各自浏览器中保存的数据，不能访问其他浏览器中保存的数据。
// 本地存储 存到本地磁盘中
// 设置内容
localStorage.setItem('name','hhh');
// 内容获取
console.log(localStorage.getItem('name'));
// 清空内容
localStorage.clear('name'); //清除属性值
localStorage.removeItem('name');
三者区别
Cookie 存储少量数据，面向服务器的，同一个服务器的cookie是共享的，最大4KB
WebStorage (仅在客户端（即浏览器）中保存，不参与和服务器的通信)
sessionStorage 会话存储，选项卡 选项卡关闭,会话失效 --写项目推荐使用
localStorage 本地存储，存到本地磁盘中，即使浏览器关闭数据依然在。
