localStorage 学习

1.localStorage 基本方法

添加键值对：localStorage.setItem(key,value)，如果key存在时，更新value。

获取键值：localStorage.getItem(key)，如果key不存在返回null。

删除键值对：localStorage.removeItem(key)。key对应的数据将会全部删除。

清除所有键值对：localStorage.clear()。如果调用clear()方法，清空localStorage中所有信息，那么key、oldValue和newValue都会被设置为null。

获取localStorage的属性名称（键名称）：localStorage.key(index)。

还有一个和普通对象不一样的属性length:

获取localStorage中保存的键值对的数量：localStorage.length。

2.存储格式

localStorage对象的键和值只能是字符串，假设我们要保存一个对象到localStorage中，可以使用拼接的方式。当然也可以借助JSON类，将对象转换成字符串保存，然后在取出来的时候将json字符串转换成真正可用的json对象格式

3.生命周期

在数据存储的时效性上，localStorage并不会像cookie那样可以设置数据存活的时限。也就是说，只要用户不主动删除，localStorage存储的数据将会永久存在。

sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

4.存储位置

不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。

5.存储大小

对于HTML5的localStorage而言，其大小支持为5M（当然，各浏览器的大小差异还是有的）。对于IE的userData，用户数据的每个域最大为64KB。

6.应用场景

建议不要使用localStorage方式存储敏感信息，哪怕这些信息进行过加密。另外，对身份验证数据使用localStorage进行存储还不太成熟。我们知道，通常可以通过xss漏洞来获取到Cookie，然后用这个Cookie进行身份验证登录，但是浏览器可以通过HttpOnly来保护Cookie不被XSS攻击获取到。而localStorage存储没有对XSS攻击有任何防御机制，一旦出现XSS漏洞，那么存储在localStorage里的数据就极易被获取到。

7.storage事件

当存储的storage数据发生变化时都会触发它，但是它不同于click类的事件会冒泡和能取消，storage改变的时候，触发这个事件会调用所有同域下其他窗口的storage事件，不过它本身触发storage即当前窗口是不会触发这个事件的（当然ie这个特例除外，它包含自己本事也会触发storage事件）。

在使用 Storage 进行存取操作的同时，如果需要对存取操作进行监听，可以使用 HTML5 Web Storage api 内置的事件监听器对数据进行监控。只要 Storage 存储的数据有任何变动，Storage 监听器都能捕获。