[譯]本地存儲(chǔ)的概述

在瀏覽器內(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 StorageWeb 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)使用传泊。

比較

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

原文

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末鸭巴,一起剝皮案震驚了整個(gè)濱河市眷细,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌鹃祖,老刑警劉巖薪鹦,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異惯豆,居然都是意外死亡池磁,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)楷兽,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)地熄,“玉大人,你說(shuō)我怎么就攤上這事芯杀《丝迹” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵揭厚,是天一觀的道長(zhǎng)却特。 經(jīng)常有香客問(wèn)我,道長(zhǎng)筛圆,這世上最難降的妖魔是什么裂明? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮太援,結(jié)果婚禮上闽晦,老公的妹妹穿的比我還像新娘。我一直安慰自己提岔,他們只是感情好仙蛉,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著碱蒙,像睡著了一般荠瘪。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 52,713評(píng)論 1 312
  • 那天哀墓,我揣著相機(jī)與錄音鞭莽,去河邊找鬼。 笑死麸祷,一個(gè)胖子當(dāng)著我的面吹牛澎怒,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播阶牍,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼喷面,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了走孽?” 一聲冷哼從身側(cè)響起惧辈,我...
    開(kāi)封第一講書(shū)人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎磕瓷,沒(méi)想到半個(gè)月后盒齿,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡困食,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年边翁,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片硕盹。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡符匾,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出瘩例,到底是詐尸還是另有隱情啊胶,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布垛贤,位于F島的核電站焰坪,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏聘惦。R本人自食惡果不足惜某饰,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望部凑。 院中可真熱鬧露乏,春花似錦碧浊、人聲如沸涂邀。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)比勉。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間浩聋,已是汗流浹背观蜗。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留衣洁,地道東北人墓捻。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像坊夫,于是被迫代替她去往敵國(guó)和親砖第。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容