HTMl5中sessionStorage和localStorage的差別



一、HTMl5 sessionStorage和localStorage差別

1、sessionStorage用于本地存儲一個會話（session）中的資料，這些資料隻有在同一個會話中的頁面才能通路并且當會話結束後資料也随之銷毀。是以sessionStorage不是一種持久化的本地存儲，僅僅是會話級别的存儲。

2、localStorage用于持久化的本地存儲，除非主動删除資料，否則資料是永遠不會過期的。

3、sessionStorage 和 localStorage的clear()函數的用于清空同源的本地存儲資料，比如localStorage.clear()，它将删除所有同源的本地存儲的localStorage資料，而對于Session Storage，它隻清空目前會話存儲的資料。

4、關閉頁面會導緻sessionStorage的資料被清除，但重新整理或重新打開新頁面資料還是存在，如果需要存儲的隻是少量的臨時資料。我們可以使用sessionStorage 。

二、HTMl5 sessionStorage和localStorage特點

1、localStorage 預設支援的容量為一個站5M，當調用setItem超過上限時，會觸發QuotaExceededError異常。當然有些浏覽器支援修改容量上限，但為了相容其他浏覽器，最好按5M的容量來使用。

2、localStorage 是以key-value形式儲存資料的，key和value隻能是字元串格式。是以數字1儲存後，會轉換成字元串1。

3、建議使用setItem(), getItem(), removeItem(), clear()來實作寫入，讀取，删除，清空。

4、如果要儲存非字元串的内容，建議使用JSON來處理。寫入資料時用JSON.stringify轉成字元串，讀取資料時用JSON.parse把字元串轉為之前的格式。

5、當調用setItem(), removeItem(), clear() 時，可以監聽這些事件，友善不同的頁面之間更新資料。

三、與cookie的差別

1、Web Storage的概念和cookie相似，差別是它是為了更大容量存儲設計的。Cookie的大小是受限的，并且每次你請求一個新的頁面的時候Cookie都會被發送過去，這樣無形中浪費了帶寬，另外cookie還需要指定作用域，不可以跨域調用。

2、Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發者自己封裝setCookie，getCookie。

3、但是Cookie也是不可以或缺的：Cookie的作用是與伺服器進行互動，作為HTTP規範的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲”資料而生

四、localStorage和sessionStorage常用的操作

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等

1、setItem存儲value

用途：将value存儲到key字段

用法：.setItem( key, value)

例如

sessionStorage.setItem("key", "value");

localStorage.setItem("site", "eee");

2、getItem擷取value

用途：擷取指定key本地存儲的值

用法：.getItem(key)

例如

var value = sessionStorage.getItem("key");

var site = localStorage.getItem("site");

3、removeItem删除key

用途：删除指定key本地存儲的值

用法：.removeItem(key)

例如

sessionStorage.removeItem("key");

localStorage.removeItem("site");

4、clear清除所有的key/value

用途：清除所有的key/value

用法：.clear()

例如

sessionStorage.clear();

localStorage.clear();

參考資料：  HTMl5 sessionStorage和localStorage   http://www.studyofnet.com/news/994.html