几种浏览器存储方法及其优缺点

在作项目的过程当中，咱们常常遇到须要把信息存储在本地的状况，好比权限验证的token、用户信息、埋点计数、客户配置的皮肤信息或语言种类等，咱们能够暂存一下避免浏览器没必要要的请求和客户多余操做，给客户使用带来方便。

那么浏览器存储有哪些方法呢，主要有cookie、localStorage、sessionStorage

cookie属于文档对象模型DOM树根节点document，而 sessionStorage 和 localStorage 属于浏览器对象模型BOM的对象window

其中 sessionStorage 和 localStorage 是 HTML5 Web Storage API 提供的

• sessionStorage：为每个给定的源（given origin）维持一个独立的存储区域，该存储区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面从新加载和恢复）
• localStorage：一样的功能，可是在浏览器关闭，而后从新打开后数据仍然存在。

1. cookie

h5以前，存储主要用cookies，缺点是在请求头上带着数据，致使流量增长。大小限制4k

操做方式：

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。

2. 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()                            // 清除全部

能够存储数组、数字、对象等能够被序列化为字符串的内容

3. sessionStorage

sessionStorage操做的方法与localStroage是同样的，区别在于 sessionStorage 在关闭页面后即被清空，而 localStorage 则会一直保存。不少时候数据只须要在用户浏览一组页面期间使用，关闭窗口后数据就能够丢弃了，这种状况使用sessionStorage就比较方便。

注意，刷新页面sessionStorage不会清除，可是打开同域新页面访问不到

4. cookie、localStorage、sessionStorage之间的区别

他们都是保存在浏览器端的存储方式，他们之间的区别：

1. cookie数据始终在同源的http请求中携带（即便不须要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，能够限制cookie只属于某个路径下。
2. 存储大小限制不一样，cookie数据不能超过4k，同时由于每次http请求都会携带cookie，因此cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，能够达到5M或更大。
3. 数据有效期不一样，sessionStorage：仅在当前浏览器窗口关闭前有效，天然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，所以用做持久数据；cookie只在设置的cookie过时时间以前一直有效，即便窗口或浏览器关闭。
4. 做用域不一样，sessionStorage不在不一样的浏览器页面中共享，即便是同一个页面；localStorage 在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的。
5. Web Storage 支持事件通知机制，能够将数据更新的通知发送给监听者。
6. Web Storage 的 api 接口使用更方便，cookie的原生接口不友好，须要本身封装。

5. 安全性

须要注意的是，不是什么数据都适合放在 Cookie、localStorage 和 sessionStorage 中的，由于它们保存在本地容易被篡改，使用它们的时候，须要时刻注意是否有代码存在 XSS 注入的风险。因此千万不要用它们存储你系统中的敏感数据。

---

网上的帖子大多深浅不一，甚至有些先后矛盾，在下的文章都是学习过程当中的总结，若是发现错误，欢迎留言指出~

参考：

1. 请描述一下 cookies，sessionStorage 和 localStorage 的区别？
2. 前端HTML5几种存储方式的总结
3. 详说 Cookie, LocalStorage 与 SessionStorage