HTML5之localStorage与sessionStorage

var name = localStorage.username;   //查询一个存储的值
name = localStorage['username'];     //等价于数组表示法
if(!name) {
  name = prompt('what is your name?');
  localStorage.username = name;      //存储一个值
}
//遍历所有存储的key/value对
for(var key in localStrorage) {
  var value = localStorage[key];
}

 

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

通过localStorage存储的数据是永久性的，除非Web应用可以删除存储的数据，或者用户通过设置浏览器配置来删除，否则数据将一直保留在用户的电脑上。

localStorage的作用域是限定在文档源（document origin）级别的，文档源是通过协议、主机名以及端口三者来确定的。

同源的文档共享同样的localStorage数据。

localStorage的作用域还受到浏览器供应商的限制，不同的浏览器之间不能共享localStorage数据。

 

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

 

与localStorage一样，sessionStorage的作用域也是限定在文档源中，因此非同源文档间都是无法共享sessionStorage的。

sessionStorage的作用域还被限定在窗口中，如果同源的文档渲染在不同的浏览器标签页中，那么它们之间拥有的是各自的sessionStorage数据，无法共享。

 

存储API

localStorage.setItem("x", 1);

localStorage.getItem("x");

//遍历所有存储的key/value对
for(var i = 0; i < localStorage.length; i++) {  //length表示所有key/value对的总数
  var name = localStorage.key(i);  //获取第i对的名字
  var value = localStorage.getItem(name);  //获取该对的值
}

localStorage.removeItem("x")   //删除“x"项

localStorage.clear()                  //清除全部