HTML5 & JavaScript 程式開發實戰修練(2/5)

2013-07-02

摘要:HTML5 & JavaScript 程式開發實戰修練(2/5)

以前網站要在用戶端儲存資訊時只能使用Cookie來達成;在HTML5新增了Web Storage(網頁儲存區)

以下為Cookie VS. Web Storage 比較:

1.Cookie最多只能存4KB;Web Storage則沒有限制

2.Cookie會附加在http的服務請求傳回給伺服器端; Web Storage不會

3.Cookie有超過儲存期限自動被刪除; Web Storage則無此限制

4.可以保留JavaScript物件

另外Web Storage定義了兩種儲存區Local Storage及Session Storage;差異在於
1.有效生命長短:
Session Storage 當瀏覽器視窗或分頁（tab）關閉即失效;Local Storage除了程式或使用者自行清除外並不會自動刪除
2.有效範圍:
Local Storag可跨分頁（tab）存取; Session Storage無法跨分頁存取

底下介紹兩種儲存區的使用方法

1.Local Storage 操作方法:

1.1 設定Local Storage:

window.localStorage.setItem("MyName", "remhom");
localStorage.setItem("MyName", "remhom");
localStorage["MyName"] = "remhom";
localStorage.MyName= "remhom";

1.2取出Local Storage:

var strName = window.localStorage.getItem("MyName");

1.3清除某一筆Local Storage:

localStorage.removeItem("MyName");

1.4清除所有Local Storage:

localStorage.clear()

1.5迴圈處理Local Storage:

 for(var key in localStorage)  
     {
       var  value=localStorage[keyName];
     }

或

for(var i=0;i<localStorage.length;i++)

{

var keyName=localStorage.key(i);

var value=localStorage[keyName];

}

2.Session Storage 操作方法:
使用方式同Local Storage;但是使用全域變數SessionStorage 來存取;

回首頁