JS sessionStorage 与 localStorage

Question

sessionStorage 与 localStorage 相同点

• 存放数据大小为一般为 5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信
• 不同浏览器无法共享 localStorage 或 sessionStorage 中的信息
• 只能存储字符串类型
• 内嵌 iframe 可以共享存储

sessionStorage

• 如果用户在 A 页面下存储了 test，通过 js 或者 a 标签跳转到同源的 B 页面时，A 页面下的 sessionStorage 会被拷贝到 B 页面下，AB 页面的 sessionStorage 虽然相同，但 二者相互独立
• 如果用户在 A 页面打开的情况下，手动打开了一个新标签页，访问 A 页面，此时会重开一个新回话，二者 sessionStorage 是不共享的

localStorage

相同浏览器同源页面，即使你新建一个窗口，也可以共享

常用方法

• setItem (key, value) —— 保存数据，以键值对的方式储存信息。
• getItem (key) —— 获取数据，将键值传入，即可获取到对应的 value 值。
• removeItem (key) —— 删除单个数据，根据键值移除对应的信息。
• clear () —— 删除所有的数据

cookie

• 大小一般为 4KB
• 随着 HTTP header 发送到服务器端
• 通过 name = value(需经过 encodeURIComponent 编码) 的形式存储
• 只在设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭
• 在所有同源窗口中都是共享的（与 localStorage 一样）
• cookie 数据还有路径的概念，可以限制 cookie 只属于某个路径下