浏览器存储

存储方式

浏览器存储，我们常见且常用的存储方式主要由两种：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

请描述一下 cookies，sessionStorage 和 localStorage 的区别？

前端HTML5几种存储方式的总结

详说 Cookie, LocalStorage 与 SessionStorage