Web Storage 学习笔记

前言：最近开始使用 localStorage 在浏览器存储数据，用习惯后发现比cookie用起来更舒服，特记录此笔记。

基本概念

Web Storage 主要包括两种机制：

• sessionStorage : 为每一个给定的源维持一个独立的存储区域，该存储区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）。即该方法是用来存储session数据的。
• localStorage : 其他功能同上，但是该方法删除数据只能主动删除，重启浏览器不会有影响。

存储介绍

 之所以转到web storage 存储，主要原因还是由于储存容量，众所周知，cookie的最大容量只有4K，非常小的容量，当页面需要大量全局变量时，cookie是完全不够的，而web storage在主流浏览器上基本都有5M左右的存储容量，不同浏览器会有些微区别，具体如下图：

firefox 也是完全支持的。
注意: IE9 支持上是有一些问题的，IE10 以上可以正常使用。

以下为本机测试储存数据（Chrome 和 Microsoft Edge 结果相同）：

常用方法

以下方法以 localStorage 为例：

1. 设置/修改值：window.localStorage.setItem('test_key','test_val'); //该方法接受一个键名和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值。
2. 获取值：window.localStorage.getItem('test_key'); // 返回键名对应的值；该方法还可用来判断本地存储是否已被填充：if(!localStorage.getItem('test_key'))
3. 删除单个键值对：window.localStorage.removeItem('test_key'); //该方法接受一个键名作为参数，并把该键名从存储中删除。
4. 清空所有键值对：window.localStorage.clear(); //调用该方法会清空存储中的所有键名。
5. 根据索引获取值：window.localStorage.key(); //该方法接受一个数值 n 作为参数，并返回存储中的第 n 个键名。
6. 唯一的属性 – window.localStorage.length获取存储在 Storage 对象里的数据项的数量。
7. storage 事件 – 当存储区域被修改时触发。

注意

1. Storage 受同源策略限制，不能跨域访问。
2. localStorage和sessionStorage 两者都会创建Storage 对象，但是当同时使用时，两者的对象是完全互不相干的，独立创建与使用。
3. localStorage只支持string类型的存储。
4. storage 事件触发注意项：
   
   1. 在同一个页面内发生的改变不会起作用——在相同域名下的其他页面（如一个新标签或 iframe）发生的改变才会起作用。
   2. 重复设置相同的键值不会触发该事件
   3. Storage.clear() 方法至多触发一次该事件

最后，附上storage 事件属性表：

以上。