Web Storage

Web Storage 已進入 Recommendation ,這項 HTML5 技術規格等同於正式底定了,工作室搭配《HTML5從零開始》一書的出版,於 9/14 的【HTML5技術入門精鍊實作】課程活動中,將透過相關的案例,示範 Web Storage 的實際應用,而這一系列的文章中,將會針對此Web資料暫存技術進行快速的入門討論。

Web Storage 機制維護一份以 key/value 形式儲存的資料清單,而資料的內容可以透過其對應的鍵或是索引進行存取。相關功能主要由 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();
};

實作 Storage 介面的物件均支援其中的方法與屬性成員,兩種實作物件可以透過 localStorage 與 sessionStorage 全域屬性取得。
  • localStorage
    支援應用程式層級的資料存取操作,這一種物件所處理的資料將儲存在瀏覽器,不會因為關閉網頁而改變,除非應用程式確實對其進行移除或是修改。
  • sessionStorage
    支授 session 層級的資料存取,這類型的資料以連線為基礎存取資料,因此每一條不同的連線均有其獨立的 sessionStorage ,一旦結束 session 就不再有效, Window 物件的 localStorage 與 sessionStorage 屬性可以讓你決定使用何種類型的 Storage

localStorage 與 sessionStorage 兩種物件的用法均相同,只是資料儲存週期的差異, localStorage 儲存的資料只有當使用者清除瀏覽器的瀏覽資料時才會消失,否則的話會一直存在於瀏覽器的儲存區,而 sessionStorage 則是在用者關閉目前的網頁時即消失。 

》系列文章持續新增中

Web Storage-儲存 key/value
Web Storage -存取方法
Web Storage -資料存取操作
Web Storage -localStorage 與 sessionStorage 的差別
Web Storage -事件處理

沒有留言: