localStorage 用法

當前瀏覽器客戶端提供多種資料本地儲存方案。

關於資料本地儲存方案概述可以參閱JavaScript 本地儲存一章節。

HTML5之前，通常利用Cookie在本地儲存資料，但缺點明顯，簡單總結如下：

（1）.Cookie儲存量太小，具體儲存量因瀏覽器不同而有所差別，大致在數K左右。

（2）.每次HTTP(S)請求，Cookie都會跟隨傳送到伺服器，浪費頻寬。

所以Cookie並不適合在客戶端儲存資料，於是儲存量更大且不會傳送到伺服器的儲存方案誕生。

本文僅介紹localstorage的用法，sessionStorage與其極為相似，indexedDB則更為強大，儲存量也更大。

（1）.sessionStorage可以參閱sessionStorage 用法一章節。

（2）.indexedDB可以參閱indexedDB 教程板塊。

一.localstorage特點：

localStorage資料是永久儲存的，除非人為操作刪除，與sessionStorage不同。

sessionStorage儲存會話期間的資料，會話結束，資料也就被刪除。

儲存資料大小的上限是5M，具體儲存量因瀏覽器不同而有所差別。

並且不會隨著HTTP(S)請求傳送到伺服器。

二.具有的屬性與方法：

具體用法可以參閱本版塊相關文章，下面僅僅做一下羅列。

（1）.length屬性：

[JavaScript] 純文字檢視 複製程式碼
localstorage.length

可以獲取儲存資料項的數量。

（2）.setItem()方法：

[JavaScript] 純文字檢視 複製程式碼
localstorage.setItem()

此方法可以新增或者修改sessionStorage物件中的一個資料項。

（3）.getItem()方法：

[JavaScript] 純文字檢視 複製程式碼
localstorage.getItem()

此方法可以獲取指定鍵名對應的資料項的值。

（4）.removeItem()方法：

[JavaScript] 純文字檢視 複製程式碼
localstorage.removeItem()

此方法可以移除指定指定鍵名的資料項，無返回值。

（5）.clear()方法：

[JavaScript] 純文字檢視 複製程式碼
localstorage.clear()

此方法可以清除sessionStorage中所有的資料項。

（6）.key()方法：

[JavaScript] 純文字檢視 複製程式碼
localstorage.key()

通過此方法可以返回指定索引位置資料項的鍵名（不推薦使用此方法）。

三.事件：

具有storage 事件，具體參閱JavaScript storage 事件一章節。