Web Storage学习（一）

Web Storage提供了存储器的缓存机制，使得浏览器可以安全地存储键值对。

基本概念:

1. Storage类型：

提供了访问特定域名下的会话存储或本地存储的功能。

方法：

clear(): 删除所有项。
getItem(name): 根据指定的name获取对应的值。
setItem(name，value):为指定的name设置相应的值。
removeItem(name):删除name对应的键值对。
key(index):获取index位置处的值的名字。

Storage类型只能存储字符串，非字符串的数据会在存储之前被转换成字符串

2. sessionStorage对象：

sessionStorage对象存储于某个特定对话的数据，也就是说该数据会在保持到浏览器页面关闭。当浏览器刷新或者崩溃重启后数据依旧可用。

语法：

sessionStorage.setItem('key', 'value');//保存数据到sessionStorage
let data = sessionStorage.getItem('key');//从sessionStorage中获取数据
sessionStorage.removeItem('key');//从sessionStorage中删除数据
sessionStorage.clear();//清空保存的数据

返回一个Storage对象

注意: 因为sessionStorage对象绑定与某个服务器会话，所有当文件在本地运行时是不可用的。存储在sessionStorage中的数据只能由最初给对象存储数据的页面访问到，对多页面有限制。

sessionStorage对象应该主要仅针对会话的小段数据存储。

3. localStorage对象：

与sessionStorage具有同样的功能，不同的是但是在浏览器关闭，然后重新打开后数据仍然存在。

语法：

localStorage.setItem("name", "Nicholas");//存储数据
localStorage.getItem("name");//读取数据

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

数据保留到通过JS删除或者用户清除浏览器你缓存

4. sessionStorage和localStorage的异同：

相同：都为浏览器缓存机制且遵循同源策略，大小都为5MB左右，不会发送数据到服务器。
不同：
sessionStorage：数据仅当前浏览器窗口有效。
localStorage：除非并清除否则永久存在。