javascript localStorage和sessionStorage

实现了web存储草案标准的浏览器在window对象上定义了两个属性: localStorage和sessionStorage, 这两个属性都代表同一个Storage对象, 以键值对存储字符串

 1 var name = localStorage.username;
 2 if (!name)
 3 {
 4   localStorage.username = "hello";
 5 } // end if
 6 
 7 for (var key in localStorage)
 8 {
 9   console.log(localStorage[key]);
10 } // end for

localStorage和sessionStorage区别在于存储有效期和作用域不同,

localStorage存储的数据时永久性的

localStorage存储的作用域限定在文档源级别, 即: 协议, 主机名, 端口

不同浏览器之间的localStorage不能互相访问

sessionStorage的有效期和存储数据的脚本所在的最顶层的矿口或者浏览器标签页是一样的, 一旦窗口或者标签页被永久关闭了, 通过sessionStorage存储的数据也被删除了

sessionStorage作用域也限定在文档源中

不同窗口和标签页各自拥有sessionStorage, 无法共享

如果一个浏览器标签页包含两个<iframe>它们包含的文档是同源的, 那么他们是可以共享的

localStorage和sessionStorage通常被当做普通javascript对象使用: 通过设置属性来存储字符串, 通过查询属性来读取, 此外

1. setItem(key, value) 可以用于存储
2. getItem(key)可以用于访问
3. removeItem(key)用于删除
4. 在非IE8中可以使用delete删除
5. clear()删除所有数据
6. key(index)方法可以获取第index个数据的key
7. 其中推荐使用setItem(), getItem()访问数据, 因为他们与其他存储方式是完全兼容的

   1 var memory = window.localStorage ||
   2               (window.UserDataStorage && new UserDataStorage()) ||
   3               new cookieStorage();
   4 
   5 var username = memory.getItem("username");              

存储事件: 当存储在localStorage或者sessionStorage上的数据发生改变时, 浏览器都会在其他对该数据可见的窗口对象上出发存储事件(改变数据的窗口对象不触发)

为存储事件注册监听器可以使用addEventListener()或者IE下的attachEvent()

与存储事件相关的事件对象有五个重要属性(IE8不支持)

1. key: 被设置或者移除的项的名字, 如果是clear()函数, 该值为null
2. newValue: 新值, 如果是removeItem(), 该属性值为null
3. oldValue: 被删除或者被改变的值, 新插入一个项时, 该值为null
4. storageArea: ???
5. url: 触发变化脚本所在文档的url