存储方式
浏览器存储，我们常见且常用的存储方式主要由两种：cookie、webStorage（localStorage和sessionStorage）
cookie属于文档对象模型DOM树根节点document，而 sessionStorage 和 localStorage 属于浏览器对象模型BOM的对象window
cookie（基于HTTP规范）
目的
Cookie诞生之初的作用就是解决HTTP的无状态请求，用来记录一些用户相关的一些状态。
- 会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息）
- 个性化设置（如用户自定义设置、主题等）
- 浏览器行为跟踪（如跟踪分析用户行为等）
缺点
h5之前，存储主要用cookies，缺点：
- 请求头上带着数据，导致流量增加。
- 大小限制4k
- Cookie的原生api不友好，需要自行封装
操作方式：
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/" // 设置cookie document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT" // 删除cookie
设置cookie的方法比较简单，其中有几个参数可以添加
参数
expires
过期时间，当过了到期日期时，浏览器会自动删除该cookie，如果想删除一个cookie，只需要把它过期时间设置成过去的时间即可 比如希望设置过期时间一年：new Date().getTime() + 365 * 24 * 60 * 60 * 1000
如果不设置过期时间，则表示这个cookie生命周期为浏览器会话期间，只要关闭浏览器窗口，cookie就消失了。
path
路径，值可以是一个目录，或者是一个路径。
如果cc.com/test/index.html 建立了一个cookie，那么在cc.com/test/目录里的所有页面，以及该目录下面任何子目录里的页面都可以访问这个cookie。因此在cc.com/test/test2/test3 里的任何页面都可以访问cc.com/test/index.html建立的cookie。若cc.com/test/ 若想访问cc.com/test/index.html设置的cookes，需要把cookies的path属性设置成“/”。 在指定路径的时候，凡是来自同一服务器，URL里有相同路径的所有WEB页面都可以共享cookies。
domain
主机名，是指同一个域下的不同主机，例如：www.baidu.com和map.baidu.com就是两个不同的主机名。默认情况下，一个主机中创建的cookie在另一个主机下是不能被访问的，但可以通过domain参数来实现对其的控制：document.cookie = "name=value;domain=.baidu.com" 这样，所有*.baidu.com的主机都可以访问该cookie。
webStorage（基于HTML5规范）
HTML5 提供了两种在客户端存储数据的新方法：localStorage和sessionStorage，挂载在window对象下。
webStorage是本地存储，数据不是由服务器请求传递的。从而它可以存储大量的数据，而不影响网站的性能。
目的
Web Storage的目的是为了克服由cookie带来的一些限制，当数据需要被严格控制在客户端上时，无须持续地将数据发回服务器。比如客户端需要保存的一些用户行为或数据，或从接口获取的一些短期内不会更新的数据，都可以利用Web Storage来存储。
localStorage
以键值对(Key-Value)的方式存储，永久存储，永不失效，除非手动删除。IE8+支持，每个域名限制5M
打开同域的新页面也能访问得到。可以存储数组、数字、对象等可以被序列化为字符串的内容
操作方式
window.localStorage.username = 'hehe' // 设置 window.localStorage.setItem('username', 'hehe') // 设置 window.localStorage.getItem('username') // 读取 window.localStorage.removeItem('username') // 删除 window.localStorage.key(1) // 读取索引为1的值 window.localStorage.clear()
sessionStorage
sessionStorage 在关闭页面后即被清空，而 localStorage 则会一直保存。很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage就比较方便。
注意，刷新页面sessionStorage不会清除，但是打开同域新页面访问不到。
操作方式
window.sessionStorage.username = 'hehe' // 设置 window.sessionStorage.setItem('username', 'hehe') // 设置 window.sessionStorage.getItem('username') // 读取 window.sessionStorage.removeItem('username') // 删除 window.sessionStorage.key(1) // 读取索引为1的值 window.sessionStorage.clear()
cookie和localstorage，sessionstorage的区别
|
|
cookie |
localstorage |
sessionStorage |
|
规范 |
HTTP规范 |
HTML5规范 |
HTML5规范 |
|
挂载对象 |
DOM |
BOM |
BOM |
|
传输 |
cookie数据始终在同源的http请求中携带（即使不需要） |
仅在本地保存，不会传输 |
仅在本地保存，不会传输 |
|
存储大小 |
4k |
5M左右，各浏览器的存储空间有差异 |
5M左右，各浏览器的存储空间有差异 |
|
有效期 |
在设置的cookie过期时间之前一直有效 |
始终有效，窗口或浏览器关闭也一直保存 |
仅在当前浏览器窗口关闭前有效 |
|
作用域 |
所有同源窗口中都是共享的 |
所有同源窗口中都是共享的 |
不在不同的浏览器页面中共享，即使是同一个页面 |
|
易用性 |
原生接口不友好，需要自己封装 |
Web Storage 提供api 接口，易用 |
Web Storage 提供api 接口，易用 |
https://cloud.tencent.com/developer/article/1356670
https://www.cnblogs.com/qiujianmei/p/10824682.html
http://www.w3school.com.cn/html5/html_5_webstorage.asp
https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Storage_API