HTML5 Web Storage用法

早期的网页数据存储只能依赖于cookies，但它存在着容量有限且很小，不便于复杂数据的管理等问题，此外，还需将cookies附带在每一次网络请求之中。HTML5的出现，极大地增加了开发人员的开发灵活度：

• Web Storage（Key-value 相对简单易用）
• Web SQL Database（用SQL访问本地数据库）
• Indexed DB（存取JSON数据的数据库）
• File system（存取文件）
• Application Cache（缓存网络资源）

Web Storage由两部分组成，sessionStorage和localStorage，sessionStorage用于本地存储一个会话 （session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久 化的本地存储，仅仅是会话级别的存储；localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。其他特性还包括：

• localStorage
  • 以域名为单位进行数据划分
  • 同域下的所有页面一起共享这些数据
  • 对数据的改动会导致同时共享这些数据的其他页面触发storage事件
• sessionStorage
  • 以每个“顶级页面（top-level browsing context）”为单位
  • 在所有同域的“子页面”中共享这些数据（对数据的改动会触发storage事件）
  • 为所有同域的以下“顶级页面”拷贝这些数据（通过超链接新打开的页面、通过脚本新打开的页面）

 

HTML5 新增的Web Storage 有localStorage 和sessionStorage，
以前要在用户端浏览器储存资料，常会使用cookie，现在则多了Web Storage 可以选择。

cookie 和Web Storage 在应用的不同点

• 可储存的资料量大小不同
  [cookie的容量]
  1. 大约只能存4KB
  [Web Storage的容量]
  1. 依W3C的说明是依用户端决定( http://www.w3.org/TR/webstorage/#disk-space )，每个origin (注1)容量一般是5MB。
  2. 在wiki查到则是每个浏览器不太一样( http://en.wikipedia.org/wiki/Web_Storage )，Google Chrome：2.5MB， Mozilla Firefox、 Opera：5MB，Internet Explorer：10MB 。
  3. 注1：相同的origin，表示同一个domain(host) 和port。
     Same Origin Policy说明：
     http://www.w3.org/Security/wiki/Same_Origin_Policy
     http://en.wikipedia.org/wiki/Same_origin_policy
• cookie会随着HTTP header传用给伺服器，所以伺服器可以直接操作cookie。
  但Web Storage则无法直接在伺服器端操作，若要在伺服器端读取Web Storage，则须另外传送。

Web Storage 使用说明

• Web Storage 包含localStorage 和sessionStorage，操作方式基本上是一样的。
  两者不一样的地方，在于：
  储存在localStorage的资料，关闭浏览器依旧会存在。
  储存在sessionStorage的资料，在关闭浏览器后，就不见了。
• localStorage 使用范例

  localStorage["test1"]='a'; //儲存資料，方法1
  localStorage.test2='b'; //儲存資料，方法2
  localStorage.setItem("test3","c"); //儲存資料，方法3
   
  alert(localStorage["test1"]); //讀取資料，方法1
  alert(localStorage.test2); //讀取資料，方法2
  alert(localStorage.getItem("test3")); //讀取資料，方法3
   
  localStorage.removeItem("test1"); //刪除key值為test1這筆資料
   
  localStorage.clear(); //刪除localStorage裡所有資料

• sessionStorage使用范例

  sessionStorage["test1"]='a'; //儲存資料，方法1
  sessionStorage.test2='b'; //儲存資料，方法2
  sessionStorage.setItem("test3","c"); //儲存資料，方法3
   
  alert(sessionStorage["test1"]); //讀取資料，方法1
  alert(sessionStorage.test2); //讀取資料，方法2
  alert(sessionStorage.getItem("test3")); //讀取資料，方法3
   
  sessionStorage.removeItem("test1"); //刪除key值為test1這筆資料
   
  sessionStorage.clear(); //刪除localStorage裡所有資料

Web Storage 的属性和方法

• length：回传有几笔资料。
• setItem(key,value)：设定一笔资料。
• getItem(key)：由指定的key，取得该笔资料，若指定的key 不存在，回传null。
  (若用localStorage["test1"]、localStorage.test1 的方式，遇不存在的key，会回传undefined)。
• removeItem(key)：由指定的key，移除该笔资料。
• clear()：清除所有资料。
• key(index) ：由指定的index(索引)，取得key的名称。

Web Storage 的事件(event) (当储存区的资料发生异动时，会触发storage事​​件)

• key：被改变的key 名称。
• oldValue：被改变的key 对应的原始资料。
• newValue：被改变的key 对应的新资料。
• url：被改变的key 原始网址。
• storageArea：被改变的Storage 物件。
• 注意事项：注册storage事件和触发storage事件的动作，须在两个页面
• 测试范例1：(用iframe 触发父视窗注册的storage 事件)
  注册storage事件页面 (里面再用iframe带入另一个test.html页面)

  <script>
  function MyStorageHandler(e){
      alert("key=" +e.key);
      alert("oldValue=" +e.oldValue);
      alert("newValue=" +e.newValue);
      alert("url=" +e.url);
      alert("storageArea=" +e.storageArea);
  }
  window.addEventListener('storage',MyStorageHandler,false);
  </script>
  <iframe src="test.html"></iframe>

   
  test.html (触发storage事件页面)，
  点击此页的按钮，建立一个新的aa=123的值，即会触发storage事件

  <input type="button" value="button" onclick="sessionStorage.setItem('aa','123');">

   
• 测试范例2：(用两个分页开启同一个页面)
  建立一个页面aa.html，内容如下

  <script>
      function MyStorageHandler(e){
          alert('test');
      }
      window.addEventListener('storage', MyStorageHandler, false);
      if(localStorage.length > 0){
          localStorage.clear();
      }else{
          localStorage.setItem('aa', '123');
      }
  </script>

   
  同时开两个分页，
  都浏览aa.html 这一页(例：http://127.0.0.1/aa.html)
  重新整理第一个分页时，会触发第二个分页的storage事件，
  反之，重新整理第二个分页时，会触发第一个分页的storage事件。
  以上是我在Firefox 和chrome 测试时的情况。
  但在IE9 上测试时，却只要一个分页就可以触发storage 事件?
  而且在IE9 上只要调用setItem()，不管值是否有改变，就会触发storage 事件
  ，不知是不是IE9 的bug?

浏览器查目前Web Storage 的值

• Firefox：使用firebug，F12 -> 主控台(console) -> 输入localStorage 或sessionStorage -> 执行。
  firebug官方说明https://getfirebug.com/wiki/index.php/DOM_Panel#localStorage
• chrome："Ctrl+Shift+I"(开发人员工具) -> Resources -> 即可看到Local Storage 和Session Storage 可以选择

原文：http://xyz.cinc.biz/2013/01/html5-web-storage.html

实例：

<input type='button' onclick='set_item()' value='存值'　/>
<input type='button' onclick='get_item()' value='取值'　/>
<input type='button' onclick='delete_item()' value='删除'　/>
<script>
//localStorage 存值永久有效
function set_item()
{
	var user = {};
  	user.name = 'Gideon Liang';
  	user.age  = 32;
  	user.home = 'USA';
 	localStorage.setItem('userinfo',JSON.stringify(user));
}

//localStorage取值
function get_item(){
	var data = JSON.parse(localStorage.getItem('userinfo'));
 	alert("name:"+data.name+"\r age:"+data.age+"\r home:"+data.home);
}

//localStorage删除指定键对应的值
function delete_item(){
 	localStorage.removeItem('userinfo');
 	alert(localStorage.getItem('userinfo'));
}
</script>