HTML5 WebStorage API snippet
這個簡單的程式可以讓你稍微少打幾個字就能存取 WebStorage,除此之外沒什麼幫助 :p
前言
HTML5 WebStorage API 可以讓開發者以 key-value pairs 格式的 DOMString 資料儲存在用戶端瀏覽器內,和 cookie 很像,最大的差別就在於 WebStorage API 並不會隨著 HTTP request 傳送,對於節省流量能有些許幫助。
除此之外,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
延伸閱讀:
這個簡單的程式可以讓你稍微少打幾個字就能存取 WebStorage,除此之外沒什麼幫助 :p
前言
HTML5 WebStorage API 可以讓開發者以 key-value pairs 格式的 DOMString 資料儲存在用戶端瀏覽器內,和 cookie 很像,最大的差別就在於 WebStorage API 並不會隨著 HTTP request 傳送,對於節省流量能有些許幫助。
除此之外,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
延伸閱讀: