這個簡單的程式可以讓你稍微少打幾個字就能存取 WebStorage,除此之外沒什麼幫助 :p

前言

HTML5 WebStorage API 可以讓開發者以 key-value pairs 格式的 DOMString 資料儲存在用戶端瀏覽器內,和 cookie 很像,最大的差別就在於 WebStorage API 並不會隨著 HTTP request 傳送,對於節省流量能有些許幫助。

webstorage

除此之外,cookie 可以設定 expires 調整存活時間,而 WebStorage API 就只有 localStorage(永久或手動清除)及 sessionStorage(視窗或分頁關閉)。

安全性方面,兩者都是儲存於用戶端的明文資料,自然就沒有所謂的 100% 可靠,所以還是別將敏感資料儲存在 WebStorage 最保險。

而目前幾乎所有較新的瀏覽器都已經支援了這個 API,所以可以安心服用…吧?

Usage:

// Set the item to current engine
// if the value is null or empty that item will be remove.
// return true (success) or false (fail)
storage.set('key', 'value');

// Get the item from current engine.
// return null if the key not found.
storage.get('key');

// Change the storage engine between `localStorage` and `sessionStorage`.
storage.engine('local');
storage.engine('session'); 

// Clear all data of current engine.
storage.clear();
// Or the specified engine
storage.engine('session');
storage.clear();

// Chaining:
storage.engine().set('key', 'value'); // Set the item to default engine.
storage.engine('session').get('key'); // Get the item from sessionStorage.
storage.engine().clear(); // Clear all data for default engine.

// EOF

Example: HTML5 WebStorage API snippet – jsFiddle

延伸閱讀: