HTML5-Web Storage APIs的簡述

1.概述
  Web Storage是一種在客戶端儲存資料的方法。比起Cookie，Web Storage更加安全，能夠儲存更多物件，而不僅僅是字串；Web Storage能夠存儲更大的數據，而不是像只能夠儲存幾KB數據的Cookie；Web Storage還可以減少數據在客戶端與伺服器間的轉換，減少頻寬。
  Web Storage的核心是是window物件的兩個子物件sessionStorage和localStorage。資料以鍵值對的形式透過這兩個物件存儲，這兩個物件都實作了storage介面，擁有相同名稱的屬性和方法，用法也相同。不同之處是二者的儲存時間和共享範圍。
  sessionStorage資料儲存時間依賴於儲存它的瀏覽器視窗或選項卡存在的時間，共享範圍也是只在產生它的瀏覽器視窗或選項卡內。
  localStorage資料儲存時間要超過瀏覽器的開啟時間，除非透過手動或程式碼刪除，其共享範圍是同源（origin）網站的頁間。
  許多瀏覽器不支援sessionStorage存取本機檔案系統，因此要透過網路伺服器使用。
  Web Storage的規範允許儲存任何類型數據，但在各瀏覽器實作上多數值允許儲存字串文字數據，但可以使用Web Storage結合JSON技術儲存非文字資料。
  更進階的資料儲存方法是Web SQL Database，用於基於索引的資料庫存儲，並具有SQL查詢語言SQLite。 Web SQL Database目前僅被Safari，Chrome和Opera支援。最終的規範很可能不採用這種方式。另外一種方法是IndexedDB，僅FireFox 4以上版本支援。

2.瀏覽器支援偵測
 

 function checkStorageSupport() { 
  //sessionStorage 
  
if
 (window.sessionStorage) { 
    alert('This browser supports sessionStorage'); 
  } 
else
 { 
    alert('This browser does NOT support sessionStorage'); 
  } 
  //localStorage 
  if (window.localStorage) { 
    alert('This browser supports localStorage'); 
  } else { 
    alert('This browser does NOT support localStorage'); 
  } 
}

3.Storage介面

  interface Storage { 
     //同源键值对的数目
     readonly attribute unsigned long length; 
     //通过索引获取键，索引从0开始
     getter DOM
String
 
key
(in unsigned long index); 
     //通过键获取值，键若不存在，值将返回
null
     getter any getItem(in DOMString key); 
     //存储键值对，若已存在同名键，则值将被覆盖。若用户关闭了浏览器存储或是已超     //过允许存储的最大值，都将产生QUOTA_EXCEEDED_ERR错误。
     
set
ter creator void setItem(in DOMString key, in any data); 
     //通过键删除值，不存在则什么也不做
     
delete
r void removeItem(in DOMString key); 
     //删除storage中所有键值对，若为空则什么也不做
     void 
clear
(); 
   };

4.讀取與儲存資料

  //---------------方式一--------------
   //存储数据
   window.sessionStorage.setItem(‘myFirstKey’, ‘myFirstValue’); 
   //读取数据
   alert(window.sessionStorage.getItem(‘myFirstKey’)); 
   //---------------方式二--------------
   //存储数据
   window.sessionStorage.myFirstKey = ‘myFirstValue’;
   //读取数据
   alert(window.sessionStorage.myFirstKey); 
   //---------------方式三--------------
   var varKey = sessionStorage.key(index);
   window.sessionStorage[varKey] = 
new
Value;

5.儲存事件
  Web Storage與其它頁面、瀏覽器視窗或標籤、Web Worker間的通訊可以透過儲存事件來進行。同源的物件都可以監聽storage事件。新增storage事件監聽方法如下：

  window.addEventListener("storage", displayStorageEvent, true);

6.StorageEvent介面
  storage事件物件實作了StorageEvent接口，該介面的宣告如下：

 interface StorageEvent : Event { 
      readonly attribute DOMString key; 
      readonly attribute any oldValue; 
      readonly attribute any newValue; 
      readonly attribute DOMString url; 
      //该方法提供了一个对发生storage事件对象的
引用
，这个对象可以是
      //sessionStorage或localStorage
      readonly attribute Storage storageArea;
   };

6.處理最大配額
  多數瀏覽器所允許的Web Storage不超過5MB，為了防止儲存資料時產生超出配額的限制，可以使用擷取QUOTA_EXCEEDED_ERR異常的方法來處理，例如：

try
   {
      sessionStorage["name"] = "Tabatha";
   }
   catch (
exception
)
   {
      if (exception == QUOTA_EXCEEDED_ERR)
      { 
         // we should tell the user their quota has been exceeded. 
      }
   }

以上是HTML5-Web Storage APIs的簡述的詳細內容。更多資訊請關注PHP中文網其他相關文章！