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端
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


zhoushx3
307 声望27 粉丝

下一篇 »
函数自执行