本地化存储Storage

为什么会引入Storage（sessionStorage,localStorage,globalStorage）

Web storage的目的是克服由cookie带来的限制，当数据需要严格控制在客户端上时，无须持续将数据发回服务器。主要是提供一种在cookie之外存储会话数据的途径和提供一种可以大量跨会话存在的数据机制；sessionStorage 对象应该主要用于仅针对会话的小段数据的存储。如果需要跨越会话存储数据，那么 localStorage 更为合适。

Storage介绍

对于 localStorage 而言，大多数桌面浏览器会设置每个来源 5MB 的限制。Chrome 和 Safari 对每个来源的限制是 2.5MB。而 iOS 版 Safari 和 Android 版 WebKit 的限制也是 2.5MB。

对 sessionStorage 的限制也是因浏览器而异。有的浏览器对 sessionStorage 的大小没有限制，但 Chrome、Safari、iOS 版 Safari 和 Android 版 WebKit 都有限制，也都是 2.5MB。IE8+和 Opera 对 sessionStorage 的限制是 5MB

sessionStorage介绍

sessionStorage对象存储特定某个会话的数据（绑定于某个服务器的会话），即该数据只保存到浏览器关闭（cookie也是会话级别）；存储在seesionStorage中的数据可以跨越页面刷新页面存在

localStorage介绍

要访问同一个localStoarge对象，页面必须来自同一个域名（子域名无效），使用同一种协议，在同一个端口上。

Storage底层原理

sessionStorage：将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，session对象可用来保存在这段时间内所要求保存的任何数据.

localStorage：将数据保存在客户端本地的硬件设备（磁盘文件）中，即使浏览器关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可用永久保存，除非程序或人工删除，没有过期时间.

Storage的特点

(1)都会在浏览器端保存，有大小限制，同源限制;

(2) sessionStorage在（会话级别）窗口关闭前有效;localStorage持久化的本地存储除非用户主动删除数据，否则数据是永远不会过期的;

(3)sessionStorage不能共享，localStorage在同源文档之间共享；

(4)对于localstorage而言，大多数桌面的浏览器都会设置来源5MB的限制，chorme和Safari对每个来源的限制是2.5MB；对于sessionStorage的限制也是因为浏览器而异，有的浏览器对sessionStage的大小是没有限制的，但chrome，safari都是2.5MB.

(5)只能存储字符串（JSON.stringify() 对象-->字符串（JSON.parse() 字符串-->对象）

Storage的优点

相比 cookie ，Web Storage 的优点主要表现在存储空间更大，可存储的内容更大。cookie每次都随请求数据发送到服务器端，Web Storage不会和请求数据一同发送到服务器端，占用带宽更少

Storage的缺点

现在所有浏览器都支持 cookie 操作，而只有现在浏览器才支持 Web Storage 操作，如果需要兼容老旧浏览器，就不能使用 Web Storage。并且Storage只能存储字符串类型的数据

Storage（localStorage和sessionStorage）的方法

clear();删除所有值;firefox中没有实现；
getItem(name);根据指定的名字name获取对应的值；
key(index):获取index位置处的值的名字；
removeItem(name):删除由name获取对应的值；
setItem(name,value);为指定name设置对应的value值；

sessionStorage.setItem("key", "value") ////使用方法存储数据
sessionStorage.book = "Professional JavaScript"; //使用属性存储数据 
var value = sessionStorage.getItem("key"); 
sessionStorage.removeItem("key")  // removeItem删除key
sessionStorage.clear()   // clear清除所有的key/value

Storage的应用

sessionStorage: 敏感账号一次性登录 localStorage: 长期登录、判断用户是否已登录、适合长期保存在本地的数据;

Web Storage 的特点，它主要被用于储存一些不经常改动的，不敏感的数据，比如全国省市区县信息。还可以存储一些不太重要的跟用户相关的数据，比如说用户的头像地址、主题颜色等，这些信息可以先存储在用户本地一份，便于快速呈现，等真正从服务器端读取成功后再更改头像地址，主题颜色。另外，基于 storage 事件特点，Web Storage 还可以用于同域不同窗口间的通信。

链接: https://www.fly63.com/article/detial/5442