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

// 1、保存數據到本地

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

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

// 2、從本地存儲獲取數據

localStorage.getItem('Author');

// 3、從本地存儲刪除某個已保存的數據

localStorage.removeItem('Author');

// 4、清除所有保存的數據

localStorage.clear();

sessionStorage

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

// 1、保存數據到本地

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

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

// 2、從本地存儲獲取數據

sessionStorage.getItem('Author');

// 3、從本地存儲刪除某個已保存的數據

sessionStorage.removeItem('Author');

// 4、清除所有保存的數據

sessionStorage.clear();

復雜數據存儲

上面都是對于簡單的數據類型的存儲，但當要存儲的數據是一個對象或是數組的時候，直接存儲是不行的

錯誤的存儲：

var user = {

username: 'liu',

password: '123456'

};

sessionStorage.setItem('user', user);

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

這個時候，就需要轉換數據格式。

存儲數據前：利用JSON.stringify將對象轉換成字符串

獲取數據后：利用JSON.parse將字符串轉換成對象

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);

寫自定義目錄標題)

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。