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

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

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

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

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

localStorage.getItem('Author');

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

localStorage.removeItem('Author');

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

localStorage.clear();

sessionStorage

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

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

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

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

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

sessionStorage.getItem('Author');

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

sessionStorage.removeItem('Author');

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

sessionStorage.clear();

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

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

錯(cuò)誤的存儲(chǔ)：

var user = {

username: 'liu',

password: '123456'

};

sessionStorage.setItem('user', user);

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

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

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

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

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)容還不錯(cuò)，歡迎將生活随笔推薦給好友。