在用戶端(浏覽器端)存儲資料有諸多益處，最主要的一點是能快速通路(網頁)資料。(以往)在用戶端有五種資料存儲方法，而目前就隻有四種常用方法了(其中一種被廢棄了)：
cookies
local storage
session storage
indexeddb
websql (被廢棄)
cookies 是一種在文檔記憶體儲字元串資料最典型的方式。一般而言，cookies 會由服務端發送給用戶端，用戶端存儲下來，然後在随後讓請求中再發回給服務端。這可以用于諸如管理使用者會話，追蹤使用者資訊等事情。
此外，用戶端也用使用 cookies 存儲資料。因而，cookies 常被用于存儲一些通用的資料，如使用者的首選項設定。
cookies 的 基本crud 操作
通過下面的文法，我們可以建立，讀取，更新和删除 cookies:
// create
document.cookie = "user_name=ire aderinokun";
document.cookie = "user_age=25;max-age=31536000;secure";
// read (all)
console.log( document.cookie );
// update
document.cookie = "user_age=24;max-age=31536000;secure";
// delete
document.cookie = "user_name=ire aderinokun;expires=thu, 01 jan 1970 00:00:01 gmt";
cookies 的優點
能用于和服務端通信
當 cookie 快要自動過期時，我們可以重新設定而不是删除
cookies 的缺點
增加了文檔傳輸的負載
隻能存儲少量的資料
隻能存儲字元串
潛在的 安全問題
自從有 web storage api (local and session storage)，cookies 就不再被推薦用于存儲資料了
浏覽器支援
所有主流浏覽器均支援 cookies.
local storage 是 web storage api 的一種類型，能在浏覽器端存儲鍵值對資料。local storage 因提供了更直覺和安全的api來存儲簡單的資料，被視為替代 cookies 的一種解決方案。
從技術上說，盡管 local storage 隻能存儲字元串，但是它也是可以存儲字元串化的json資料。這就意味着，local storage 能比 cookies 存儲更複雜的資料。
local storage 的 基本crud 操作
通過下面的文法，我們可以建立，讀取，更新和删除 local storage:
const user = { name: 'ire aderinokun', age: 25 }
localstorage.setitem('user', json.stringify(user));
// read (single)
console.log( json.parse(localstorage.getitem('user')) )
const updateduser = { name: 'ire aderinokun', age: 24 }
localstorage.setitem('user', json.stringify(updateduser));
localstorage.removeitem('user');
local storage 的優點
相比于cookies：
其提供了更直覺地接口來存儲資料
更安全
能存儲更多資料
local storage 的缺點
隻能存儲字元串資料(直接存儲複合資料類型如數組/對象等，都會轉化成字元串，會存在存取資料不一緻的情況)：
localstorage.setitem('test',1);
console.log(typeof localstorage.getitem('test')) //"string"
localstorage.setitem('test2',[1,2,3]);
console.log(typeof localstorage.getitem('test2')) //"string"
console.log(localstorage.getitem('test2')) //"1,2,3"
localstorage.setitem('test3',{a:1,b:2});
console.log(typeof localstorage.getitem('test3')) //"string"
console.log(localstorage.getitem('test3')) //"[object object]"
//為避免存取資料不一緻的情形，存儲複合資料類型時進行序列化，讀取時進行反序列化
localstorage.setitem('test4', json.stringify({a:1,b:2}));
console.log(typeof localstorage.getitem('test4')) //"string"
console.log(json.parse(localstorage.getitem('test4'))) //{a:1,b:2}
ie8+/edge/firefox 2+/chrome/safari 4+/opera 11.5+(caniuse)
session storage 是 web storage api 的另一種類型。和 local storage 非常類似，差別是 session storage 隻存儲目前會話頁(tab頁)的資料，一旦使用者關閉目前頁或者浏覽器，資料就自動被清除掉了。
session storage 的 基本crud 操作
通過下面的文法，我們可以建立，讀取，更新和删除 session storage:
sessionstorage.setitem('user', json.stringify(user));
console.log( json.parse(sessionstorage.getitem('user')) )
sessionstorage.setitem('user', json.stringify(updateduser));
sessionstorage.removeitem('user');
優點，缺點和浏覽器支援
和 local storage 一樣
indexeddb 是一種更複雜和全面地用戶端資料存儲方案，它是基于 javascript、面向對象的和資料庫的，能非常容易地存儲資料和檢索已經建立關鍵字索引的資料。
在建構漸進式web應用一文中，我已經介紹了怎麼使用 indexeddb 來建立一個離線優先的應用。
indexeddb 的基本 crud 操作
注：在示例中，我使用了 jake’s archibald 的 indexeddb promised library, 它提供了 promise 風格的indexeddb方法
使用 indexeddb 在浏覽器端存儲資料比上述其它方法更複雜。在我們能建立/讀取/更新/删除任何資料之前，首先需要先打開資料庫，建立我們需要的stores(類似于在資料庫中建立一個表)。
function openidb() {
return idb.open('sampledb', 1, function(upgradedb) {
const users = upgradedb.createobjectstore('users', {
keypath: 'name'
});
});
}
建立或者更新store中的資料：
// 1. open up the database
openidb().then((db) => {
const dbstore = 'users';
// 2. open a new read/write transaction with the store within the database
const transaction = db.transaction(dbstore, 'readwrite');
const store = transaction.objectstore(dbstore);
// 3. add the data to the store
store.put({
name: 'ire aderinokun',
age: 25
// 4. complete the transaction
return transaction.complete;
});
檢索資料：
// 2. open a new read-only transaction with the store within the database
const transaction = db.transaction(dbstore);
// 3. return the data
return store.get('ire aderinokun');
}).then((item) => {
console.log(item);
})
删除資料：
// 3. delete the data corresponding to the passed key
store.delete('ire aderinokun');
如果你有興趣了解更多關于indexeddb的使用，可以閱讀我的這篇關于怎麼在漸進式web應用(pwa)使用indexedd。
indexeddb 的優點
能夠處理更複雜和結構化的資料
每個’database’中可以有多個’databases’和’tables’
更大的存儲空間
對其有更多的互動控制
indexeddb 的缺點
比 web storage api 更難于應用
ie10+/edge12+/firefox 4+/chrome 11+/safari 7.1+/opera 15+(caniuse)
對比
參考
an overview of client-side storage(https://bitsofco.de/an-overview-of-client-side-storage/)
作者：佚名
來源：51cto