HTML5客户端存储Web Storage

1. Web Storage

支持情况：IE8以上的主流浏览器都支持Web Storage，IOS平台和Android平台对Web Storage都有很好的支持。

localStorage：存储在本地磁盘，永久存储。sessionStorage：临时存储，数据保存在浏览器内存中，当浏览器关闭，内存将被自动清除。

Web Storage特点：

（1）设置和读取数据方便

（2）容量大，sessionStorage约5M，localStorage约20M

（3）只能存储字符串，如果要存储JSON对象，可通过JSON.stringify()和JSON.parse()方法进行转换

2. 存储方法：（localStorage和sessionStorage的用法一样，拿localStorage举例）

（1）存储属性名和属性值

（2）storage存储的值是字符串，要是存储对象，要用json格式存入，取出后再进行转换

3. 取出storage中的数据

注意：storage存储值后，localStorage会永久存在本地，除非清除；而sessionStorage临时存储，关闭该浏览器的窗口就清除

注意：JSON.stringify()和JSON.parse()方法的使用

4. 作用域

（1）都受同源策略的限制

（2）都受文档源的限制

storage缓存机制是：首先，缓存值存在本地计算机中；本地中是按浏览器（Google Chrome | IE | 火狐），然后同一个浏览器下（不同浏览器生成不同文件夹）按不同的服务器（不同服务器百度、腾讯、淘宝等生成不同文件夹）存储storage值。

当我的电脑通过浏览器建立本机的缓存值时，任何一个通过该形式创建的页面，都可以获取到本机的缓存值，因为我的电脑就是一个特定的服务器，而在我的电脑下创建的任何文件.html，他们之间的storage值是相互可以获取的

（3）sessionStorage还受到窗口限制

sessionStorage只在本窗口下有效，即本html文件下的sessionStorage不可以被其他html文件获取。

5. storage封装的api：

方法和属性	描述
setItem(key, value)	设置一个键值对，如果键存在，则更新其对应的值
getItem(key)	获得键所对应的值
removeItem(key)	移除删除某个键
key(n)	得到第n位（0,1,2,3，，，）key的名称
clear()	清除当前域名下所有的localStorage或sessionStorage内容
length属性	storage中键值对的数量（1,2,3，，，）

（1）getItem和setItem

（2）removeItem

（3）clear

6. storage和cookie的区别：

7. sessionStorage特别之处：

在JavaScript语言中可通过 window.sessionStorage 或 sessionStorage 调用此对象。

引入了“浏览器窗口”的概念，sessionStorage在同源同窗口中始终存在数据，只要这个浏览器窗口没有关闭，即使刷新页面或者通过该窗口 “进入同源的另一个窗口页面”或者“该窗口下同源的另一个页面”，数据任然存在，只有在关闭窗口后，该窗口下的sessionStorage被销毁。

解释：（1）刷新页面，sessionStorage的数据还在。

（2）该窗口下，进入同源的另一个页面：比如a标签，target = _self，sessionStorage对象下的值还是存在的

（3）从该A窗口下，进入另一个B窗口的任何的同源页面，B窗口下sessionStorage对象下的值还是存在的，而且，值与A窗口下的值相等。当然，B窗口下的sessionStorage对象也是新的，此时修改A或者B窗口的sessionStorage对象的值，它们之间互不影响。因为是不同window对象的sessionStorage对象，只是B窗口的初始sessionStorage对象的值与A窗口的相等罢了。

（4）同时“独立”的打开的不同窗口，即使是同一个页面，sessionStorage对象也是不同的。

8. Storage事件监听

在使用Web Storage存储数据的时候，当存储的数据发生变化时，会触发window对象的storage事件，通过监听该事件并对其指定处理函数，可以实现同源的多个窗口之间的通信。

浏览器同时打开一个域名下的多个页面，当其中一个页面的localStorage对象或者sessionStorage对象的数据发生改变时，其他页面会触发storage事件，而原始页面不触发storage事件。IE浏览器除外，它会在所有页面触发storage事件。

注意：storage是window对象上的事件

比如：

window.addEventListener("storage", function(event) {
      console.log(event.key + " " + event.newValue)
    })

 在事件处理函数中，回调函数接收一个event对象作为参数，event对象上有一些属性，如下表：

属性	描述
event.key	sessionStorage或localStorage中被修改的键
event.oldValue	sessionStorage或localStorage中被修改前的值
event.newValue	sessionStorage或localStorage中被修改后的值
event.url	sessionStorage或localStorage中被修改时的url地址
event.storageArea	变动的sessionStorage或localStorage