以下是放置很久的紀錄，最近整理清出來 (ry
Web Storage 是一種可讓網頁將資料儲存於 local 端的技術，純粹運作於 client side，其作用如同 cookie，但空間更大。 它原本是 HTML5 規格的一部份，後來單獨劃為一個規格。
Web Storage 主要分成兩種 :
local storage (類似 persistent cookies)
session storage (類似 session cookies)
Web Storage
Usage
支援 Web Storage 的 browsers 會有 sessionStorage 和 localStorage 這兩個 global variables，可以使用 Javascript 來操作
sessionStorage
// Store value on browser for duration of the session
sessionStorage.setItem('key', 'value');
// Retrieve value (gets deleted when browser is closed and re-opened)
alert(sessionStorage.getItem('key'));
localStorage
// Store value on the browser beyond the duration of the session
localStorage.setItem('key', 'value');
// Retrieve value (persists even after closing and re-opening the browser)
alert(localStorage.getItem('key'));
Accessing data for the currently browsed domain
以下是取得目前 domain 的所有在 local storage 裡的 data 的範例 code
var output = "LOCALSTORAGE DATA:\n------------------------------------\n";
if (window.localStorage) {
if (localStorage.length) {
for (var i = 0; i < localStorage.length; i++) {
output += localStorage.key(i) + ': ' + localStorage.getItem(localStorage.key(i)) + '\n';
}
} else {
output += 'There is no data stored for this domain.';
}
} else {
output += 'Your browser does not support local storage.'
}
console.log(output);
Data types
只有 strings 可以透過 Storage API 儲存進去，在多數的 browser 裡，如果要嘗試存入非 string 的 data type，會自動轉為 string
// Store an object instead of a string
localStorage.setItem('key', {name: 'value'});
alert(typeof localStorage.getItem('key')); // string
// Store an integer instead of a string
localStorage.setItem('key', 1);
alert(typeof localStorage.getItem('key')); // string
// Store an object using JSON
localStorage.setItem('key', JSON.stringify({name: 'value'}));
alert(JSON.parse(localStorage.getItem('key')).name); // value
DOM Storage
Web Storage 也常被稱為 DOM storage (這裡指的不是 Document Object Model)
According to the W3C, “The term DOM is used to refer to the API set made available to scripts in Web applications, and does not necessarily imply the existence of an actual Document object…”
Web Storage Management
Local Storage
Firefox 會把所有 web storage objects 存入一個叫作 webappsstore.sqlite 的 sqlite 檔案 (可以用 sqlite3 的 command 去看)，
例如 : ~/.mozilla/firefox/XXX/webappsstore.sqlite ，
column 裡會有 reversed hostname 和 protocol
$ sqlite3 webappsstore.sqlite
sqlite> .tables
webappsstore2
sqlite> .schema
CREATE TABLE webappsstore2 (scope TEXT, key TEXT, value TEXT, secure INTEGER, owner TEXT);
CREATE UNIQUE INDEX scope_key_index ON webappsstore2(scope, key);
sqlite> select * from webappsstore2;
moc.elpmaxe.www.:http:80|stringkey|value|0|
moc.elpmaxe.www.:http:80|jsonkey|{"key","value"}|0|
sqlite> .exit
Chrome 把這個 sqlite 的 file 依照 hostname 和 protocol 分開來
Chromium 的路徑 : ~/.config/chromium/Default/Local Storage/
Session Storage
因為 session storage 在重開之後就會被清掉，所以不需要存進 database
Firefox 還是會把它寫入 disk 來提供目前 session 的 restore (主要用於 recover from crashes)，
這個檔案是一個 JSON file 在 ~/.mozilla/firefox/XXX/sessionstore.js ，
裡面有個 key 叫 storage ，它的 value 是 URLs 和 sessionStorage data 的對應