Web Storage

1、Web Storage 是个啥？

HTML5 的 Web Storage 提供了两种在客户端存储数据的方法：loaclStorage 和 sessionStorage。它们可以键值对的形式在本地保存数据。其中 loaclStorage 用于持久化的本地数据，除非主动删除数据，否则数据永远不会过期。sessionStorage 保存会话期内数据，当用户关闭浏览器后，则这些数据会被删除。

Web Storage 的优点有：（1）存储空间更大、（2）存储内容不会发送到服务器、（3）提供一套更为丰富的接口，使得数据操作更为简便、（4）每个域（包括子域）有独立的存储空间，各个存储空间完全独立，不会造成数据混乱。

Web Storage 的缺陷主要几种在安全性方面：（1）浏览器会为每个域分配独立的存储空间，但是浏览器不会检查 JavaScript 脚本所在的域与当前的域是否相同、（2）存储在本地的数据未被加密而且永远不会过期，及易造成隐私泄露。

2、基本操作

loaclStorage 和 sessionStorage 对象拥有相同的属性和方法，也都具有相同的操作，简单说明一下：

2.1、存储值

使用 setltem() 方法可以存储值，用法如下：

setItem(key，value);    //参数key表示键名，value表示值，都以字符串形式进行传递。例如：
sessionStorage.setItem("key","value");
localStorage.setItem("site","mysite.cn");

2.2、读取值

使用 getltem() 方法可以读取指定键名的值，用法如下：

getItem(key);    //参数key表示键名，字符串类型。该方法将获取指定key本地存储的值。例如：
var value = sessionStorage.getItem("key");
var site = locaiStorage.getItem("site");

2.3、删除值

使用 removeltem() 方法可以删除指定键名本地存储的值。用法如下：

removeTtem(key);    //例如：
sessionStorage.removeItem("key");
localStorage.removeltem("site");

2.4、清空本地存储

使用 clear() 方法可以清空所有本地存储的键值对。用法如下：

clear();    //例如：
sessionStorage.clear();
localstorage.clear();

2.5、遍历操作

loaclStorage 和 sessionStorage 提供 key() 方法和 lengh 属性，使用它们可以方便地实现存储数据的遍新操作。下面例子获取本地 localStorage，然后使用 for 语句循环迭代所有本地存储的数据，并显示调试平台上面。

var storage = window.localStorage;
for(var i=0, len=storage.length;i<len;i++){
    var key = storage.key();
    var value = storage.getItem(key);
    console.log(key+"="+value);
}

2.6、storage 事件

Web Storage 还提供了 storage 事件，当键值改变或者 clear 的时候，就可以触发 storage 事件。

下面例子为页面添加了一个 storage 事件，这样当页面的本地存储发生值变动时将触发该事件。

if(window.addEventListener){
    window.addEventlistener("storage",handle_storage,false);
}eise if(window,attachEvent){
    window.attachEvent("onstorage",handle_storage);
}
funetion handle_storage(e){
    var logged = "key:" + e.key + ", newvalue:" + e.newValue + ", oldValue:" + e.oldValue  +
         ", url:" + e.url + ", storageArea:" + e.storageArea;
    alert(logged);
}

3、storage 事件说明表

属性	类型	说明
key	String	健的名称
oldValue	Any	以前的值（被覆盖的值），如果是新添加的项目，则为null
newValue	Any	新的值，如果是新添加的项目，则为null
url/uri	String	引发更改的方法所在的页面地址

4、应用 idea

4.1、设计网页皮肤

在网页设计中，我们会用 JavaScript 动态设计网页皮肤，当用户选择某种样式的皮肤后，则再次访问该网站或页面，都将显示相同的皮肤样式。对于皮肤配置数据，最适合使用 localStorage 进行存储，这样每次访问页面时，都会自动调用 localStorage 数据设计页面样式，避免用户每次访问页面是都需要重新设置选项。

这是因为 loaclStorage 用于持久化的本地数据，除非主动删除数据，否则数据永远不会过期。

4.2、设计计数器

sessionStorage 可以作为会话计数器，localStorage 则可以作为 Web 应用访问计数器。声明一个 localStorage 计数器变量，当刷新页面时，会看到计数器增长，即使关闭浏览器窗口，然后重新访问页面，计数器会继续技术，而 sessionStorage 计数器只能够在当前会话期间显示页面访问量，即刷新页面会看到计数器增长，而当关闭浏览器床口，然后再试一次，计数器就会重置。

这是因为 loaclStorage 用于持久化的本地数据，除非主动删除数据，否则数据永远不会过期。而 sessionStorage 保存会话期内数据，当用户关闭浏览器后，则这些数据会被删除。