Web API之sessionStorage、localStorage、globalStorage

1. 介绍
a) sessionStorage和localStorage都是window的属性，也是Storage对象的实例，即：window.sessionStorage instanceof Storage返回True，window.localStorage instanceof Storage 返回True,也因此两者享有Storage的属性和方法。
b) sessoinStorage存储的数据在页面会话结束时会被清空，页面会话在浏览器窗口关闭前持续存在，包含页面刷新和恢复。若新开标签或窗口将新建一个会话，再次获取sessionStorage将只限于当前会话，与先前会话的无关。localStorage存储的数据不会
c) window.globalStorage自Gecko 13 (Firefox 13)起不再支持。

---

2.属性
a) length(只读)：返回Storage对象存储的数据条目数。

---

3. 方法
a) key(index)：返回第index(从0开始)个键；若index>=length或者<0则返回null
b) getItem(key)：返回key对应的键值或null
c) setItem(key, value)：添加或者更新键值对
d) removeItem(key)：删除该键对应的键值对
e) clear()：清空所有键值对

---

4. 局限
a) Value只能是字符串，所以如果想存储对象的话，可以使用JSON.stringify(json)转为字符串，取出的时候使用JSON.parse(string)转回对象。
b) 不同浏览器的容量上限不同，使用该链接进行测试，http://dev-test.nemikor.com/web-storage/support-test/ 本人的谷歌版本为：Chrome 43.0.2357，测试结果如下：

---

5. 注意
a) 一个会话只对应一个sessionStorage（或者localStorage），即var x = window.sessionStorage和var y = window.sessionStorage时，x和y指向是同一个sessionStorage对象。另外，无法自己new一个Storage对象，即无法var s = new Storage()，不清楚。
b) 可能添加键值对失败，原因可能：用户禁止使用Storage或者达到存储上限。
c) 存储在浏览器中的数据，如localStorage，以源进行分割。每个源都拥有自己单独的存储空间，一个源中的Javascript脚本不能对属于其它源的数据进行读写操作。

---

6. 知识补充
同源(same origin):如果两个页面拥有相同的协议（protocol），端口（如果指定），和主机，那么这两个页面就属于同一个源（origin）。
下表给出了相对http://store.company.com/dir/page.html同源检测的示例:

---

7. 兼容性
a) PC端

b) 移动端

---

8. 参考资料
a) https://w3c.github.io/webstorage/#the-sessionstorage-attribute
b) https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage
c) https://developer.mozilla.org/zh-CN/docs/Web/API/Window/sessionStorage
d) https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy