這篇文章主要介紹HTML5中l(wèi)ocalStorage和sessionStorage之間的區(qū)別是什么，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

站在用戶的角度思考問題，與客戶深入溝通，找到烏蘇網(wǎng)站設計與烏蘇網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：網(wǎng)站建設、成都網(wǎng)站建設、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、域名與空間、虛擬空間、企業(yè)郵箱。業(yè)務覆蓋烏蘇地區(qū)。

HTML5 提供兩種web存儲方法，localStorage 與 sessionStorage

localStorage 與 sessionStorage 區(qū)別

localStorage沒有過期時間，只要不clear或remove，數(shù)據(jù)會一直保存。

sessionStorage 針對一個session進行數(shù)據(jù)存儲，生命周期與session相同，當用戶關(guān)閉瀏覽器后，數(shù)據(jù)將被刪除。

特點：

1.localStorage 默認支持的容量為一個站5M，當調(diào)用setItem超過上限時，會觸發(fā)QuotaExceededError異常。當然有些瀏覽器支持修改容量上限，但為了兼容其他瀏覽器，最好按5M的容量來使用。

2.localStorage 是以key-value形式保存數(shù)據(jù)的，key和value只能是字符串格式。因此數(shù)字1保存后，會轉(zhuǎn)換成字符串1。

3.localStorage 的寫入與讀取寫法有以下幾種：

localStorage.name = 'fdipzone';
name = localStorage.name;
localStorage['name'] = 'fdipzone';
name = localStorage['name'];
localStorage.setItem('name', 'fdipzone');
name = localStorage.getItem('name');

localStorage[key] = value寫法主流瀏覽器都支持，官方并沒有說明那一種寫法是標準。但如果執(zhí)行以下的代碼就使localStorage失效。

localStorage.setItem = null;
localStorage.getItem = null;
localStorage.removeItem = null;
localStorage.clear = null;

因此，建議使用setItem(), getItem(), removeItem(), clear()來實現(xiàn)寫入，讀取，刪除，清空。

4.如果要保存非字符串的內(nèi)容，建議使用JSON來處理。寫入數(shù)據(jù)時用JSON.stringify轉(zhuǎn)成字符串，讀取數(shù)據(jù)時用JSON.parse把字符串轉(zhuǎn)為之前的格式。

例子1：

 
  
  
 
 
  
姓名:
  
性別: 男  女
  
    
  
 

例子2：使用 JSON.stringify 和 JSON.parse 封裝數(shù)據(jù)

 
  
  
 
 
  
姓名:
  
性別: 男  女
  
   
  
 

監(jiān)聽localStorage的值，當發(fā)生變化時同步頁面數(shù)據(jù)

當調(diào)用setItem(), removeItem(), clear() 時，可以監(jiān)聽這些事件，方便不同的頁面之間更新數(shù)據(jù)。

// 監(jiān)聽數(shù)據(jù)變化,當數(shù)據(jù)發(fā)生變化時,同步數(shù)據(jù)顯示
window.onstorage = function(event){
	var status = {}
	status.key = event.key;
	status.oldValue = event.oldValue;
	status.newValue = event.newValue;
	status.url = event.url;
	status.storage = event.storageArea;
	// 執(zhí)行同步數(shù)據(jù)處理...
}

以上是HTML5中l(wèi)ocalStorage和sessionStorage之間的區(qū)別是什么的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！