HTML5 Web 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 可以選擇