赵工的个人空间

对于应用程序来说，必备的功能之一就是能够存储数据，并在需要的时候提供数据。过去在Web用户端没有能够支持数据存储的有效机制，cookie只限存储一些短的字符串，最大4k数据，而且只在一些特定情况下使用。
Web存储API允许像桌面应用程序那样在用户的硬盘上存储数据，并在日后使用这些数据，而且数据可在多个页面中共享甚至同步。这个API分成两个部分，分别称为会话存储sessionStorage和本地存储localStorage，最大容量可到5M/10M，但服务器不能读取。
这个API明确地区分了临时数据和持久数据，因此既方便编写只需要保存少量字符串临时引用的小应用程序（如购物车），也方便编写必须保存整个文档多次按需使用的大型或更复杂的应用程序。多数浏览器只有在源是真正的服务器时才能正常处理这个API。
sessionStorage和localStorage是浏览器客户端操作的数据，并完全继承同一个存储API，所以编程接口是一样的，主要区别在于数据存在的时间范围和页面范围。sessionStorage的数据只在构建它们的窗口或标签页内可见，只会保存到存储它的窗口或标签页关闭时；localStorage可被同源的每个窗口或者标签页共享，窗口或浏览器关闭后还可以存在。

1.检测浏览器支持：

Web Storage的浏览器支持度比较好，但也需要检查浏览器是否支持。示例：
function checkStorageSupport() {
   if (window.sessionStorage) {
      console.log("浏览器支持sessionStorage");
   } else {
      console.log("浏览器不支持sessionStorage");
   }
   if (window.localStorage) {
      console.log("浏览器支持localStorage");
   } else {
      console.log("浏览器不支持localStorage");
   }
}
window.addEventListener("load",checkStorageSupport,false);
使用console.log()方法，可以把调试的内容输出到浏览器的控制台。

2.设置和获取Storage数据：

sessionStorage和localStorage操作数据的方法是一样的，所有只需要以一种为例。

1)保存数据setItem()：

sessionStorage保存数据的语法为：
window.sessionStorage.setItem("key","value");
其中，key表示键，value表示值。

2)获取数据getItem()：

如果知道保存在sessionStorage中的键，就可以取到对应的值。语法：
value=window.sessionStorage.getItem("key");

3)其他写法：

根据键/值配对关系，可以直接在sessionStorage对象上设置和获取数据，而避免调用setItem()和getItem()方法。写为：
window.sessionStorage.key="value";
window.sessionStorage["key"]="value";
上面两种写法都可以。而获取数据的方法可以写为：
value=window.sessionStorage.key;
value=window.sessionStorage["key"];
这种灵活的使用方法，给编程带来很大的方便。对localStorage同样适用。

示例：

function testStorage() {
   window.localStorage.setItem("localKey","localValue");
   console.log(window.localStorage.getItem("localKey"));
   window.sessionStorage.setItem("sessionKey","sessionValue");
   console.log(window.sessionStorage.getItem("sessionKey"));
}
window.addEventListener("load",testStorage,false);

3.Storage的属性和方法：

sessionStorage和localStorage都继承Storage API。Storage接口为：
Interface Storage {
   readonly attribute unsigned long length;
   DOMString? key(unsigned long index);
   getter DOMString getItem(DOMString key);
   setter creator void setItem(DOMString key, DOMString value);
   deleter void removeItem(DOMString key);
   void clear();
};
上述代码中显示了接口中所有的属性和方法：
·length属性：表示当前Storage对象中存储的键/值对的数量，只能反映同源的键/值对
·key(index)方法：获取指定位置的键，一般用于遍历某个Storage对象中所有的键，index参数从0开始，直到length-1。
·getItem(key)方法：根据键返回相应的数据值。如果键不存在，返回null。
·setItem(key,value)方法：将数据存入指定键对应位置，如果对应键值已存在则更新。
·removeItem(key)方法：从存储对象中移除指定的键/值对，不存在时不执行任何操作。
·clear()方法：清空Storage对象中所有的数据。如果本来就是空的，不执行任何操作。
在使用sessionStorage和localStorage时，以上属性和方法都可以使用。示例：
function saveStorage(frm) {
   var storage=window.sessionStorage;
   storage.setItem("name",frm.name.value);
   storage.setItem("age",frm.age.value);
   storage.setItem("email",frm.email.value);
   storage.setItem("phone",frm.phone.value);
}
function showStorage() {
   var storage=window.sessionStorage;
   var result="";
   for (var i=0;i<storage.length;i++) {
      var key=storage.key(i);
      var value=storage.getItem(key);
      result+=key+":"+value+": ";
   }
   document.getElementById("formdata").innerHTML=result;
}
对应的表单HTML为：
<form id="form1" name="form1" method="post" action="">
<table width="100%" border="1" bordercolor="#CCCCCC" cellpadding="3" cellspacing="0">
   <tr>
      <td>姓名</td>
      <td><input type="text" name="name" id="name" /></td>
   </tr>
   <tr>
      <td>年龄</td>
      <td><input type="text" name="age" id="age" /></td>
   </tr>
   <tr>
      <td>Email</td>
      <td><input type="text" name="email" id="email" /></td>
   </tr>
   <tr>
      <td>电话</td>
      <td><input type="text" name="phone" id="phone" /></td>
   </tr>
   <tr>
      <td></td>
      <td><input type="button" value="保存" onclick="saveStorage(this.form)" />
      <input type="button" value="显示" onclick="showStorage()" /></td>
   </tr>
</table>
</form>
<div id="formdata"></div>
上例中，有两个脚本处理函数，分别对应保存数据和显示数据。显示数据中，根据索引遍历键，并根据键获取对应的值。

4.存储JSON对象的数据：

一些浏览器把数据限定为字符串类型，对一些复杂结构的数据，使用键/值对方式就不易管理。对于复杂结构的数据，可以使用现在浏览器都支持的JSON对象来处理。

1)序列化JSON格式数据：

由于Storage是以字符串保存数据，因此在保存JSON格式的数据之前，需要把JSON格式的数据转换为字符串，称为序列化。使用JSON.stringify()函数：
var stringData=JSON.stringify(jsonObject);
以上代码吧JSON格式的数据对象jsonObject序列化为字符串数据stringData。

2)把数据反序列化为JSON格式：

如果把存储的Storage中字符串数据转换为JSON格式数据，称为反序列化。使用JSON.parse()函数：
Var jsonObject=JSON.parse(stringData);
以上代码把字符串数据stringData反序列化为JSON格式的数据对象jsonObject。
反序列化字符串也可以使用eval()函数，但eval()函数是把任意字符串转换为脚本，有很大的安全隐患，虽然执行效率要高。

示例：
<script type="text/javascript">
var flag=1;
window.sessionStorage.clear();
function saveStorage(frm) {
   var jsonObject=new Object();
   jsonObject.name=frm.name.value;
   jsonObject.age=frm.age.value;
   jsonObject.email=frm.email.value;
   jsonObject.phone=frm.phone.value;
   var stringData=JSON.stringify(jsonObject);
   var storage=window.sessionStorage;
   storage.setTtem("key"+flag,stringData);
   flag++;
}
function showStorage() {
   var storage=window.sessionStorage;
   var result="";
   for (var i=0;i<storage.length;i++) {
      var key=storage.key(i);
      var stringData=storage.getItem(key);
      var jsonObject=JSON.parse(stringData);
      result+="姓名:"+jsonObject.name+"；年龄: "+jsonObject.age+"；邮件: "+ jsonObject. email+"<br />";
   }
   document.getElementById("formdata").innerHTML=result;
}
</script>
保存数据时，先使用表单内容建立一个JSON对象，然后序列化JSON对象为字符串数据，保存至Storage。显示数据时，会遍历所有保存的数据，并把读取的数据反序列化一个JSON对象，然后再对该对象进行操作。

5.Storage事件：

会存在多个页面或标签页同时访问存储数据的情况，为保证修改的数据能够及时反馈到另一个页面，HTML5的Web Storage内建立了一套事件通知机制，会在数据更新时触发。无论监听的窗口是否存储过该数据，只要与执行存储的窗口是同源的，都会触发Web Storage事件。
添加监听事件后，即可接收同源的Storage事件：
window.addEventListener("storage",EventHandle,true);
其中，storage是添加的监听事件。
Storage事件的接口为：
interface StorageEvent : Event {
   readonly attribute DOMString key;
   readonly attribute DOMString? oldValue;
   readonly attribute DOMString? newValue;
   readonly attribute DOMString url;
   readonly attribute DOMString storageArea;
};
StorageEvent对象在事件触发时，会传递给事件处理程序，它包含了与存储变化有关的所有必要的信息。
·key属性：包含了存储中被更新或删除的键。
·oldValue属性：包含了更新前键对应的数据。如果是新添加的数据，则值为null。
·newValue属性：包含了更新后的数据。如果是被删除的数据，则值为null。
·url属性：指向Storage事件的发生源。
·storageArea属性：该属性是一个引用，指向值发送变化的localStorage或sessionStorage。这样，处理程序可以方便地查询到Storage中的当前值，或者基于其他的Storage执行其他操作。

示例：两个窗口实现通信
窗口Page1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>窗口通信Page1</title>
<script type="text/javascript">
function saveStorage(frm) {
   window.localStorage.name=document.getElementById("name").value;
}
</script>
</head>
<body>
姓名<input type="text" name="name" id="name" />
<input type="button" value="保存" onclick="saveStorage(this.form)" />
</body>
</html>
窗口Page2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>窗口通信Page2</title>
<script type="text/javascript">
function eventHandle(e) {
   var storage=window.localStorage;
   var result="";
   result+="<br />姓名:"+storage.name;
   result+="<br />key:"+e.key;
   result+="<br />oldValue:"+e.oldValue;
   result+="<br />newValue:"+e.newValue;
   result+="<br />url:"+e.url;
   result+="<br />storageArea:"+JSON.stringify(e.storageArea);
   document.getElementById("formdata").innerHTML=result;
}
window.addEventListener("storage",eventHandle,true);
</script>
</head>
<body>
<div id="formdata"></div>
</body>
</html>
在Page1页面，会把输入表单的姓名保存在localStorage中，而且可以随时更改存储的值。Page2中，注册了Storage事件的监听，当存储在localStorage中的数据发生改变时，会触发Page2中的Storage事件，执行eventHandle()函数，把保存在localStorage里的数据显示出来。
通过Storage实现的窗口通信，可以实现多个窗口的数据同步。如果是后台异步获取数据并更新Storage存储数据，同样可以利用此事件，完成数据的及时同步。