localStorage生命周期是永久，除非主動清除localStorage信息，否則這些信息將永遠(yuǎn)存在。存放數(shù)據(jù)大小為一般為5MB,而且它僅在客戶端（即瀏覽器）中保存，不參與和服務(wù)器的通信。

// 1、保存數(shù)據(jù)到本地

// 第一個參數(shù)是保存的變量名，第二個是賦給變量的值

localStorage.setItem('Author', 'local');

// 2、從本地存儲獲取數(shù)據(jù)

localStorage.getItem('Author');

// 3、從本地存儲刪除某個已保存的數(shù)據(jù)

localStorage.removeItem('Author');

// 4、清除所有保存的數(shù)據(jù)

localStorage.clear();

sessionStorage

sessionStorage僅在當(dāng)前會話下有效，關(guān)閉頁面或瀏覽器后被清除。存放數(shù)據(jù)大小為一般為5MB,而且它僅在客戶端（即瀏覽器）中保存，不參與和服務(wù)器的通信。

// 1、保存數(shù)據(jù)到本地

// 第一個參數(shù)是保存的變量名，第二個是賦給變量的值

sessionStorage.setItem('Author', 'session');

// 2、從本地存儲獲取數(shù)據(jù)

sessionStorage.getItem('Author');

// 3、從本地存儲刪除某個已保存的數(shù)據(jù)

sessionStorage.removeItem('Author');

// 4、清除所有保存的數(shù)據(jù)

sessionStorage.clear();

復(fù)雜數(shù)據(jù)存儲

上面都是對于簡單的數(shù)據(jù)類型的存儲，但當(dāng)要存儲的數(shù)據(jù)是一個對象或是數(shù)組的時候，直接存儲是不行的

錯誤的存儲：

var user = {

username: 'liu',

password: '123456'

};

sessionStorage.setItem('user', user);

console.log(sessionStorage.getItem('user'));

這個時候，就需要轉(zhuǎn)換數(shù)據(jù)格式。

存儲數(shù)據(jù)前：利用JSON.stringify將對象轉(zhuǎn)換成字符串

獲取數(shù)據(jù)后：利用JSON.parse將字符串轉(zhuǎn)換成對象

var user = {

username: 'liu',

password: '123456'

};

user = JSON.stringify(user);

sessionStorage.setItem('user', user);

var account = sessionStorage.getItem('user');

console.log(account);

account = JSON.parse(account)

console.log(account);

寫自定義目錄標(biāo)題)

總結(jié)

以上是生活随笔為你收集整理的HTML5 Web 存储（localStorage和sessionStorage）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。