在瀏覽器內(nèi)直接存儲(chǔ)數(shù)據(jù)有很多好處，最主要的是快以及獨(dú)立于網(wǎng)絡(luò)去訪問(wèn)“數(shù)據(jù)庫(kù)”耕突，目前有四種方法(加上一個(gè)棄用)厂抽，將數(shù)據(jù)存儲(chǔ)在客戶端：

1. Cookies
2. Local Storage
3. Session Storage
4. IndexedDB
5. 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

img

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

img

WebSQL

自2010年以來(lái),W3C Web應(yīng)用程序規(guī)范工作組已經(jīng)停止對(duì)其維護(hù)白粉。它不再是一個(gè)HTML規(guī)范的一部分,不應(yīng)使用传泊。

比較

原文