storage接口

概述：

Storage 接口用于脚本在浏览器保存数据，有两个对象部署了这个接口：sessionStorage和localStorage

sessionStorage保存的数据用于浏览器的一次会话（session），当会话结束（通常是窗口关闭），数据被清空；需要注意的是，有些浏览器提供了会话恢复功能，这种情况下即使关闭了浏览器，会话期也会被保留下来，就好像浏览器从来没有关闭一样。

localStorage保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据。除了保存期限的长短不同，这两个对象的其他方面都一致。一般用于本地持久化存储

PS:保存的数据都以“键值对”的形式存在。也就是说，每一项数据都有一个键名和对应的值。所有的数据都是以字符串格式保存。注意了，使用的时候先把数据JSON.stringify一下。拿出来用的时候在JSON.parse一下

关于存储空间：

每个域名的存储上限视浏览器而定，大约10M上下吧。都不一样。

属性方法：

length属性返回保存的数据项个数。

setItem()方法用于存入数据。它接受两个参数，第一个是键名，第二个是保存的数据。如果键名已经存在，该方法会更新已有的键值。该方法没有返回值。

getItem()方法用于读取数据。它只有一个参数，就是键名。如果键名不存在，该方法返回null。

removeItem()方法用于清除某个键名对应的键值。它接受键名作为参数，如果键名不存在，该方法不会做任何事情。

clear()方法用于清除所有保存的数据。该方法的返回值是undefined。

key()接受一个整数作为参数（从零开始），返回该位置对应的键值。

PS:key()方法与length属性可遍历所有的键

Storage事件

Storage 接口储存的数据发生变化时，会触发 storage 事件，可以指定这个事件的监听函数。

监听函数接受一个event实例对象作为参数。这个实例对象继承了 StorageEvent 接口，有几个特有的属性，都是只读属性。

StorageEvent.key：字符串，表示发生变动的键名。如果 storage 事件是由clear()方法引起，该属性返回null。

StorageEvent.newValue：字符串，表示新的键值。如果 storage 事件是由clear()方法或删除该键值对引发的，该属性返回null。

StorageEvent.oldValue：字符串，表示旧的键值。如果该键值对是新增的，该属性返回null。

StorageEvent.storageArea：对象，返回键值对所在的整个对象。也说是说，可以从这个属性上面拿到当前域名储存的所有键值对。

StorageEvent.url：字符串，表示原始触发 storage 事件的那个网页的网址。

PS:注意，该事件有一个很特别的地方，就是它不在导致数据变化的当前页面触发，而是在同一个域名的其他窗口触发。也就是说，如果浏览器只打开一个窗口，可能观察不到这个事件。比如同时打开多个窗口，当其中的一个窗口导致储存的数据发生改变时，只有在其他窗口才能观察到监听函数的执行。可以通过这种机制，实现多个窗口之间的通信。

一些问题？

Cookie 和 LocalStorage 的区别：

LocalStorage是客户端持久储存，可以随时调用或存储数据，跟服务器没关系，跟HTTP也没关系。

Cookie是服务端发来的一小段文本信息，前端不应该去读写Cookie，因为Cookie是服务器自己发出去，然后自己查看的东西。

但有一段历史插曲：在之前，并没有localStorage这个API，有很多前端想要实现本地持久储存都用Cookie来存储一些数据，但是这样做很不好啊，因为浏览器每次请求都会带上Cookie，这样一来请求数据就变大了，速度就变慢了，用户体验降低。

LocalStorage 和 SessionStorage 的区别：

LocalStorage，本地持久储存，需要手动删除

SessionStorage，本地临时储存，会话结束（关闭网页）自动删除