一、方式
javaScript本地緩存的方法我們主要講述以下四種：

• cookie
• sessionStorage
• localStorage
• indexedDB

cookie

Cookie，類型為「小型文本文件」，指某些網(wǎng)站為了辨別用戶身份而儲存在用戶本地終端上的數(shù)據(jù)。是為了解決 HTTP無狀態(tài)導(dǎo)致的問題

作為一段一般不超過 4KB 的小型文本數(shù)據(jù)，它由一個名稱（Name）、一個值（Value）和其它幾個用于控制 cookie有效期、安全性、使用范圍的可選屬性組成

但是cookie在每次請求中都會被發(fā)送，如果不使用 HTTPS并對其加密，其保存的信息很容易被竊取，導(dǎo)致安全風(fēng)險。舉個例子，在一些使用 cookie保持登錄態(tài)的網(wǎng)站上，如果 cookie被竊取，他人很容易利用你的 cookie來假扮成你登錄網(wǎng)站

關(guān)于cookie常用的屬性如下：

Expires 用于設(shè)置 Cookie 的過期時間

Expires=Wed, 21 Oct 2015 07:28:00 GMT

Max-Age 用于設(shè)置在 Cookie 失效之前需要經(jīng)過的秒數(shù)（優(yōu)先級比Expires高）

Max-Age=604800

Domain指定了 Cookie 可以送達的主機名

Path指定了一個 URL路徑，這個路徑必須出現(xiàn)在要請求的資源的路徑中才可以發(fā)送 Cookie 首部

Path=/docs # /docs/Web/ 下的資源會帶 Cookie 首部

標記為 Secure的 Cookie只應(yīng)通過被HTTPS協(xié)議加密過的請求發(fā)送給服務(wù)端

通過上述，我們可以看到cookie又開始的作用并不是為了緩存而設(shè)計出來，只是借用了cookie的特性實現(xiàn)緩存

關(guān)于cookie的使用如下：

document.cookie = ‘名字=值’;

關(guān)于cookie的修改，首先要確定domain和path屬性都是相同的才可以，其中有一個不同得時候都會創(chuàng)建出一個新的cookie

Set-Cookie:name=aa; domain=aa.net; path=/ # 服務(wù)端設(shè)置
document.cookie =name=bb; domain=aa.net; path=/ # 客戶端設(shè)置

最后cookie的刪除，最常用的方法就是給cookie設(shè)置一個過期的事件，這樣cookie過期后會被瀏覽器刪除

localStorage

HTML5新方法，IE8及以上瀏覽器都兼容

特點

• 生命周期：持久化的本地存儲，除非主動刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠不會過期的
• 存儲的信息在同一域中是共享的
• 當本頁操作（新增、修改、刪除）了localStorage的時候，本頁面不會觸發(fā)storage事件,但是別的頁面會觸發(fā)storage事件。
• 大?。?M（跟瀏覽器廠商有關(guān)系）
• localStorage本質(zhì)上是對字符串的讀取，如果存儲內(nèi)容多的話會消耗內(nèi)存空間，會導(dǎo)致頁面變卡
• 受同源策略的限制

下面再看看關(guān)于localStorage的使用

設(shè)置

localStorage.setItem(‘username’,‘cfangxu’);

獲取

localStorage.getItem(‘username’)

獲取鍵名

localStorage.key(0) //獲取第一個鍵名

刪除

localStorage.removeItem(‘username’)

一次性清除所有存儲

localStorage.clear()

localStorage 也不是完美的，它有兩個缺點：

• 無法像Cookie一樣設(shè)置過期時間
• 只能存入字符串，無法直接存對象

localStorage.setItem('key', {name: 'value'});
console.log(localStorage.getItem('key')); // '[object, Object]'
//如果要存入對象，我們就把對象通過JSON.stringify將對象轉(zhuǎn)成字符串
// 取值在同個JSON.parse將字符串轉(zhuǎn)成對象

sessionStorage

sessionStorage和 localStorage使用方法基本一致，唯一不同的是生命周期，一旦頁面（會話）關(guān)閉，sessionStorage 將會刪除數(shù)據(jù)

擴展的前端存儲方式

indexedDB是一種低級API，用于客戶端存儲大量結(jié)構(gòu)化數(shù)據(jù)(包括, 文件/ blobs)。該API使用索引來實現(xiàn)對該數(shù)據(jù)的高性能搜索

雖然 Web Storage對于存儲較少量的數(shù)據(jù)很有用，但對于存儲更大量的結(jié)構(gòu)化數(shù)據(jù)來說，這種方法不太有用。IndexedDB提供了一個解決方案

優(yōu)點：

• 儲存量理論上沒有上限
• 所有操作都是異步的，相比 LocalStorage 同步操作性能更高，尤其是數(shù)據(jù)量較大時
• 原生支持儲存JS的對象
• 是個正經(jīng)的數(shù)據(jù)庫，意味著數(shù)據(jù)庫能干的事它都能干

缺點：

• 操作非常繁瑣
• 本身有一定門檻

關(guān)于indexedDB的使用基本使用步驟如下：

• 打開數(shù)據(jù)庫并且開始一個事務(wù)
• 創(chuàng)建一個 object store
• 構(gòu)建一個請求來執(zhí)行一些數(shù)據(jù)庫操作，像增加或提取數(shù)據(jù)等。
• 通過監(jiān)聽正確類型的 DOM 事件以等待操作完成。
• 在操作結(jié)果上進行一些操作（可以在 request對象中找到）

關(guān)于使用indexdb的使用會比較繁瑣，大家可以通過使用Godb.js庫進行緩存，最大化的降低操作難度

二、區(qū)別

關(guān)于cookie、sessionStorage、localStorage三者的區(qū)別主要如下：

• 存儲大小：cookie數(shù)據(jù)大小不能超過4k，sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大
• 有效時間：localStorage存儲持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動刪除數(shù)據(jù)；sessionStorage數(shù)據(jù)在當前瀏覽器窗口關(guān)閉后自動刪除；cookie設(shè)置的cookie過期時間之前一直有效，即使窗口或瀏覽器關(guān)閉
• 數(shù)據(jù)與服務(wù)器之間的交互方式，cookie的數(shù)據(jù)會自動的傳遞到服務(wù)器，服務(wù)器端也可以寫cookie到客戶端；sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存

三、應(yīng)用場景

在了解了上述的前端的緩存方式后，我們可以看看針對不對場景的使用選擇：文章來源地址http://www.zghlxwxcb.cn/news/detail-475488.html

• 標記用戶與跟蹤用戶行為的情況，推薦使用cookie
• 適合長期保存在本地的數(shù)據(jù)（令牌），推薦使用localStorage
• 敏感賬號一次性登錄，推薦使用sessionStorage
• 存儲大量數(shù)據(jù)的情況、在線文檔（富文本編輯器）保存編輯歷史的情況，推薦使用indexedDB

到了這里，關(guān)于javascript基礎(chǔ)二十四：JavaScript中本地存儲的方式有哪些？區(qū)別及應(yīng)用場景？的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！