HTML 5 Web 存储localStorage sessionStorage

HTML5 提供了两种在客户端存储数据的新方法：

localStorage - 没有时间限制的数据存储

sessionStorage - 针对一个 session 的数据存储

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

常用的方法

localStorage.setItem("key","value");//以“key”为名称存储一个值“value”
localStorage.getItem("key");//获取名称为“key”的值
localStorage.removeItem("key");
localStorage.clear();
localStorage.length;//属性
localStorage.key(index)

事件

storage事件，参数为

key,

oldval,

newval,

url,

storage

 

var se = document.createEvent("StorageEvent");
se.initStorageEvent('storage', false, false, key, oldval, newval, url, storage);
window.dispatchEvent(se);


window.addEventListener("storage",function(e){
     console.log(e);
},false);

 

 

 在同源页面中某一页面对storage数据进行添加或更新处理后，其余的同源页面只要注册了storage事件，就会触发事件。