HTML5 高階系列 web Storage

html5 的 web storage 儲存方式有兩種：localstorage 和 sessionstorage。

這兩種方式都是通過鍵值對儲存資料，訪問方便，不影響**效能。他們的用法相同，儲存時間不同。

localstorage 的資料儲存在本地硬體上，可以永久儲存，可以手動呼叫api清除資料。sessionstorage 儲存在 session 物件中，會在瀏覽器關閉時被清除。

web storage 的大小在瀏覽器上是有限制的，不同瀏覽器大小會有區別，在主流瀏覽器中，大小約為 5m，用來儲存普通資料其實已經足夠。

## 用法

以 localstorage 為例，sessionstorage 用法一樣：儲存資料：localstorage.setitem(key,value);

示例：

localstorage.setitem('name','hello world');

讀取資料：localstorage.getitem(key);

示例：

localstorage.getitem('name');       // hello world

示例：

localstorage.removeitem('name');

localstorage.getitem('name'); // null

刪除所有資料：localstorage.clear();

示例：

localstorage.clear();

得到某個索引的key：localstorage.key(index);

示例：

localstorage.setitem('name1','hello world');

localstorage.setitem('name2','hello linxin');
localstorage.key(1); // name2

在實際專案中，可能需要多次對 localstorage 進行操作，我們可以通過乙個建構函式來更好的操作。

示例：

var localevent = function (item) 

this.set = function (val) 
this.remove = function () 
this.clear = function () 
}// 使用new字元把建構函式例項化出多個物件
var local1 = new localevent('name1');
var local2 = new localevent('name2');
local1.set('hello world');
local2.set('hello linxin');
local1.get(); // hello world
local2.get(); // hello linxin

可以通過監聽 window 物件的 storage 事件並指定其事件處理函式，當頁面中對 localstorage 或 sessionstorage 進行修改時，則會觸發對應的處理函式。

window.addeventlistener('storage',function(e))

注意：在谷歌瀏覽器中，需要在不同標籤頁中修改 storage 才會觸發該事件，即 網頁a 監聽該事件，在 網頁b 中修改 localstorage，則 網頁a 會觸發事件函式。但是在 ie 中，在同個網頁修改 localstorage 都會觸發該事件。

ie8 以上就相容，但是比較特別，需要在伺服器上開啟的才支援，直接雙擊開啟檔案的 file:// 是不相容的。

到了 ie11 才支援 file:// 下開啟的，其他瀏覽器的支援程度都很高，包括在手機上的相容。具體相容可檢視：

HTML5 高階系列 web Storage

html5 的 web storage 儲存方式有兩種 localstorage 和 sessionstorage。這兩種方式都是通過鍵值對儲存資料，訪問方便，不影響 效能。他們的用法相同，儲存時間不同。localstorage 的資料儲存在本地硬體上，可以永久儲存，可以手動呼叫api清除資料。se...

HTML5 高階系列 indexedDB 資料庫

乙個 可以有多個 indexeddb 資料庫，但每個資料庫的名稱是唯一的。我們需要通過資料庫名來連線某個具體的資料庫。var request indexeddb.open dbname 1 開啟 dbname 資料庫 request.onerror function e request.onsucc...

HTML5 高階系列 indexedDB 資料庫

在 html5 的本地儲存中，有一種叫 indexeddb 的資料庫，該資料庫是一種儲存在客戶端本地的 nosql 資料庫，它可以儲存大量的資料。從上篇 html5 高階系列 web storage 我們知道 web storage 可以方便靈活的在本地訪問簡單資料，但是對於大量結構化儲存，inde...