Web產品中很多時候需要在客戶端，即瀏覽器中保存一些必要的數據。而面臨這類需求時，你應當知悉對應的解決方案不僅僅只有一種。 Cookie 這是最早被使用，且至今仍被廣泛採用的最簡單的瀏覽器中保存數據方法。 Cookie使用鍵/值形式存儲數據，且數據類型只能為字元串。 Cookie相關的CRUD操作： ...
Web產品中很多時候需要在客戶端，即瀏覽器中保存一些必要的數據。而面臨這類需求時，你應當知悉對應的解決方案不僅僅只有一種。
Cookie
這是最早被使用，且至今仍被廣泛採用的最簡單的瀏覽器中保存數據方法。
Cookie使用鍵/值形式存儲數據，且數據類型只能為字元串。
Cookie相關的CRUD操作：
- 創建
document.cookie="username=Ken";- 修改
document.cookie="username=Foo";和創建Cookie的語法一致，新的值會覆蓋原有的值。
- 查找
var cookies = document.cookie以上方法可以獲取所有的Cookie鍵值，要想獲得特定鍵值的話可以用以下代碼實現，其中的username可以替換成實際的鍵值：
var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)username\s*\=\s*([^;]*).*$)|^.*$/, "$1");- 刪除
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";雖然沒有直接的刪除方式，但可以通過設置過期時間來解決這個問題。
LocalStorage
HTML 5 Web存儲方式的一種，主要優勢是突破cookie最大隻有4KB容量的限制，能夠保存10MB的數據。
與Cookie同樣地使用鍵/值形式存儲數據，且數據類型只能為字元串。
LocalStorage相關的CRUD操作：
- 創建
localStorage.setItem('username', 'Ken');- 修改
localStorage.setItem('username', 'Foo');同樣是覆蓋操作。
- 查找
var username = localStorage.getItem('username');- 刪除
localStorage.removeItem('username');一次刪除所有鍵值的方法：
localStorage.clear();SessionStorage
另一種HTML 5 Web存儲方式，其與LocalStorage的唯一區別在於LocalStorage沒有過期時間，要想去除已保存的數據，只能用代碼執行刪除操作。而用SessionStorage保存的數據在標簽頁或者瀏覽器視窗關閉後自動失效。
SessionStorage相關語法與LocalStorage一致。
Web SQL Database
該技術已被W3C廢棄，理由是各廠家對其的實現方式都是基於SQLite的，從而被認為缺乏多樣性而達不到標準化的要求。
並且該技術僅被Google Chrome，Opera，Safari和Android Browser使用。另兩家主要的瀏覽器廠家的產品，Microsoft的Internet Explorer以及Mozilla的Firefox對它未提供支持。
因此結論是使用其它相似的替換品，而不要再使用它。
IndexedDB
主流瀏覽器產品都支持的一種技術，包括桌面端與移動端。Web SQL Database的替代品。
IndexedDB同Cookie，Local Storage與Session Storage的差別主要有：
- 存儲容量更大，可達50M或更多
- 支持所有的JavaScript數據類型
- 讀寫操作皆包含於事務之內
- 支持索引查詢
- 非同步處理方式
IndexedDB的使用方法與一般的資料庫有些相似，但因為其所有操作都是非同步，所以編寫代碼時的體驗還是很不一樣的。
第一步是打開一個資料庫，如果該資料庫不存在的話，會自動創建一個。
在IndexedDB中，ObjectStore是其它資料庫中數據表的概念。
創建ObjectStore時除了可以指定主鍵之外，還可以對其它欄位建立索引。
var db;
var request = window.indexedDB.open('info');
request.onsuccess = function (event) {
db = request.result;
};
request.onupgradeneeded = function(event) {
db = event.target.result;
var objectStore = db.createObjectStore('user', { keyPath: 'id' });
objectStore.createIndex("name", "name", { unique: false });
}IndexedDB相關的CRUD操作：
- 創建
function create() {
var store = db.transaction('user', 'readwrite').objectStore('user')
var request = store.add({ id: 1, name: 'Ken', email: '[email protected]' });
}
create();- 修改
function update() {
var store= db.transaction('user', 'readwrite').objectStore('user')
var request = store.put({ id: 1, name: 'Ken', email: '[email protected]' });
}
update()- 查找
使用主鍵查詢數據的方法：
function query() {
var store = db.transaction('user', 'readonly').objectStore('user')
var request = store.get(1)
request.onsuccess = function(event) {
console.log(request.result)
}
}
query()使用其它欄位索引查詢數據的方法：
function query() {
var store = db.transaction('user', 'readonly').objectStore('user')
var request = store.index('name').get('Ken')
request.onsuccess = function(event) {
console.log(request.result)
}
}
query()- 刪除
function delete() {
var store = db.transaction('user', 'readwrite').objectStore('user')
var request = store.delete(1);
}
delete()
