在瀏覽器內(nèi)直接存儲(chǔ)數(shù)據(jù)有很多好處,最主要的是快以及獨(dú)立于網(wǎng)絡(luò)去訪問(wèn)“數(shù)據(jù)庫(kù)”耕突,目前有四種方法(加上一個(gè)棄用)厂抽,將數(shù)據(jù)存儲(chǔ)在客戶端:
- Cookies
- Local Storage
- Session Storage
- IndexedDB
- WebSQL (棄用)
Cookies
Cookies
是經(jīng)典的存儲(chǔ)數(shù)據(jù)方式浪秘,把簡(jiǎn)單的字符串?dāng)?shù)據(jù)儲(chǔ)存在一個(gè)文檔里蒋情。通常情況下,Cookies
從服務(wù)器被發(fā)送到客戶機(jī)耸携,然后儲(chǔ)存棵癣,并在后續(xù)請(qǐng)求中發(fā)送回服務(wù)器。這可以用于管理賬戶和跟蹤用戶信息夺衍。
另外狈谊,Cookies
可以完全在客戶端存儲(chǔ)數(shù)據(jù),正因?yàn)槿绱?它們也被用于存儲(chǔ)通用數(shù)據(jù)如用戶偏好沟沙。
Cookies實(shí)現(xiàn)基本的CRUD
我們可以創(chuàng)建河劝、讀取、更新和刪除cookie使用以下語(yǔ)法:
// 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的優(yōu)點(diǎn)
- 可以用于與服務(wù)器通信
- 可以設(shè)置自動(dòng)到期,而不必手動(dòng)刪除
Cookies的缺點(diǎn)
- Cookie數(shù)量和長(zhǎng)度有限制
- 只能儲(chǔ)存字符串
- 潛在的安全問(wèn)題
- 自從網(wǎng)絡(luò)存儲(chǔ)API問(wèn)世以來(lái)矛紫,它不再是客戶端存儲(chǔ)所推薦的方法
Support
在所有主要瀏覽器基本都支持
Local Storage
Local Storage
是Web Storage API
中的一種赎瞎,是一種將鍵值數(shù)據(jù)存儲(chǔ)在瀏覽器中的API。它通過(guò)提供一個(gè)更加直觀和安全API來(lái)存儲(chǔ)簡(jiǎn)單的數(shù)據(jù)在瀏覽器內(nèi)颊咬,解決了Cookies
中的問(wèn)題务甥。
盡管技術(shù)上我們只能將字符串存儲(chǔ)在本地存儲(chǔ),但這可以存儲(chǔ)字符串化的JSON。跟Cookies
比贪染,這使我們能將更復(fù)雜的數(shù)據(jù)存儲(chǔ)在本地缓呛。
Local Storage實(shí)現(xiàn)基本的CRUD
我們可以創(chuàng)建催享、讀取杭隙、更新和刪除cookie使用以下語(yǔ)法:
// Create
const user = { name: 'Ire Aderinokun', age: 25 }
localStorage.setItem('user', JSON.stringify(user));
// Read (Single)
console.log( JSON.parse(localStorage.getItem('user')) )
// Update
const updatedUser = { name: 'Ire Aderinokun', age: 24 }
localStorage.setItem('user', JSON.stringify(updatedUser));
// Delete
localStorage.removeItem('user');
Local Storage 的優(yōu)點(diǎn)
- 提供了一個(gè)更簡(jiǎn)單直觀的界面來(lái)存儲(chǔ)數(shù)據(jù)(跟cookie比)
- 本地存儲(chǔ)更安全(跟cookie比)
- 允許存儲(chǔ)更多的數(shù)據(jù)(跟cookie比)
Local Storage 的缺點(diǎn)
- 只允許存儲(chǔ)字符串
Support
Session Storage
Session Storage
是第二種類(lèi)型的網(wǎng)絡(luò)存儲(chǔ)API。和Local Storage
很相似,不同之處在于 Local Storage
里面存儲(chǔ)的數(shù)據(jù)沒(méi)有過(guò)期時(shí)間設(shè)置因妙,而存儲(chǔ)在 Session Storage
里面的數(shù)據(jù)在頁(yè)面會(huì)話結(jié)束時(shí)會(huì)被清除痰憎。
Session Storage實(shí)現(xiàn)基本的CRUD
我們可以創(chuàng)建、讀取攀涵、更新和刪除cookie使用以下語(yǔ)法:
// Create
const user = { name: 'Ire Aderinokun', age: 25 }
sessionStorage.setItem('user', JSON.stringify(user));
// Read (Single)
console.log( JSON.parse(sessionStorage.getItem('user')) )
// Update
const updatedUser = { name: 'Ire Aderinokun', age: 24 }
sessionStorage.setItem('user', JSON.stringify(updatedUser));
// Delete
sessionStorage.removeItem('user');
Session Storage優(yōu)缺點(diǎn)以及Support
跟Local Storage
一樣
IndexedDB
IndexedDB
是一個(gè)對(duì)瀏覽器存儲(chǔ)數(shù)據(jù)來(lái)說(shuō)更加復(fù)雜但更加全面的解決方案铣耘。IndexedDB 是“一個(gè)為了能夠在客戶端存儲(chǔ)可觀數(shù)量的結(jié)構(gòu)化數(shù)據(jù),并且在這些數(shù)據(jù)上使用索引進(jìn)行高性能檢索的 API”(Mozilla)以故。這是一個(gè)基于javascript蜗细、面向?qū)ο蟆?shù)據(jù)庫(kù)使我們方便地存儲(chǔ)和檢索數(shù)據(jù)
Ire Aderinokun的文章中,詳細(xì)的說(shuō)了如何使用IndexedDB創(chuàng)建一個(gè)離線應(yīng)用程序炉媒。
IndexedDB實(shí)現(xiàn)基本的CRUD
跟其他瀏覽器存儲(chǔ)方法比起來(lái)踪区,使用IndexedDB更為復(fù)雜的。在我們可以創(chuàng)建/讀取/更新/刪除任何數(shù)據(jù)之前,我們需要首先打開(kāi)數(shù)據(jù)庫(kù),創(chuàng)建一個(gè)放數(shù)據(jù)的倉(cāng)庫(kù)吊骤。
function OpenIDB() {
return idb.open('SampleDB', 1, function(upgradeDb) {
const users = upgradeDb.createObjectStore('users', {
keyPath: 'name'
});
});
}
創(chuàng)建(或更新)數(shù)據(jù),我們需要經(jīng)過(guò)以下步驟:
// 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;
});
讀取數(shù)據(jù),我們需要經(jīng)過(guò)以下步驟:
// 1. Open up the database
OpenIDB().then((db) => {
const dbStore = 'users';
// 2. Open a new read-only transaction with the store within the database
const transaction = db.transaction(dbStore);
const store = transaction.objectStore(dbStore);
// 3. Return the data
return store.get('Ire Aderinokun');
}).then((item) => {
console.log(item);
})
刪除數(shù)據(jù),我們需要經(jīng)過(guò)以下步驟:
// 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. Delete the data corresponding to the passed key
store.delete('Ire Aderinokun');
// 4. Complete the transaction
return transaction.complete;
})
IndexedDB的優(yōu)點(diǎn)
- 可以處理更復(fù)雜的缎岗、結(jié)構(gòu)化的數(shù)據(jù)
- 在每個(gè)“數(shù)據(jù)庫(kù)”中,可以有多個(gè)“數(shù)據(jù)庫(kù)”和“表”
- 更多的存儲(chǔ)空間
- 控制我們?nèi)绾闻c之交互
IndexedDB的缺點(diǎn)
跟其他Web Storage API比起來(lái)太過(guò)復(fù)雜
Support
WebSQL
自2010年以來(lái),W3C Web應(yīng)用程序規(guī)范工作組已經(jīng)停止對(duì)其維護(hù)白粉。它不再是一個(gè)HTML規(guī)范的一部分,不應(yīng)使用传泊。
比較
Feature | Cookies | Local Storage | Session Storage | IndexedDB |
---|---|---|---|---|
存儲(chǔ)空間 | ~4KB | ~5MB | ~5MB | Up to half of hard drive |
持久數(shù)據(jù)? | Yes | Yes | No | Yes |
數(shù)據(jù)類(lèi)型 | String | String | String | Any structured data |
可檢索? | No | No | No | Yes |