快捷導航

javascript中本地存儲localStorage，sessionStorage，cookie，indexDB的用法與使用場景匯總

更新時間：2025年02月01日 09:31:25 投稿：wdc

一文講清楚javascript?本地存儲localStorage,sessionStorage,cookie,indexDB的使用方法,以及各自的使用場景

在JavaScript中，本地存儲是一種在用戶的瀏覽器上存儲數(shù)據(jù)的方式，它允許網(wǎng)頁在不與服務(wù)器進行額外數(shù)據(jù)傳輸?shù)那闆r下保留跨會話信息。主要有三種本地存儲方式：sessionStorage、localStorage、cookie與indexDB。

javaScript有4種數(shù)據(jù)存儲方式，分別是：

sessionStorage
localStorage
cookier
indexDB

一. javaScript本地存儲之 sessionStorage

sessionStorage僅在當前會話下有效，關(guān)閉頁面或瀏覽器后被清除，也就是說sessionStorage只存在于窗口(頁面)活躍期，一旦窗口關(guān)閉，sessionStorage將會刪除數(shù)據(jù)。

sessionStorage的方法有以下幾個

setItem(key,value) 設(shè)置數(shù)據(jù)
getItem(key) 獲取數(shù)據(jù)
removeItem(key) 移除數(shù)據(jù)
clear() 清除所有值

sessionStorage實例：

// 添加數(shù)據(jù)
window.sessionStorage.setItem("name","李四")
window.sessionStorage.setItem("age",18)

// 獲取數(shù)據(jù)
console.log(window.sessionStorage.getItem("name")) // 李四

// 清除某個數(shù)據(jù)
window.sessionStorage.removeItem("gender")

// 清空所有數(shù)據(jù)
window.sessionStorage.clear()

二. javaScript本地存儲之 localStorage

localStorage是HTML5中引入的技術(shù)，用于在用戶的瀏覽器上長期存儲數(shù)據(jù)，直到用戶手動刪除。與sessionStorage類似，但localStorage存儲的數(shù)據(jù)沒有過期時間。它同樣提供了setItem、getItem、removeItem和clear方法來操作數(shù)據(jù)。

localStorage的方法有以下幾個

setItem(key,value) 設(shè)置數(shù)據(jù)
getItem(key) 獲取數(shù)據(jù)
removeItem(key) 移除數(shù)據(jù)
clear() 清除所有值

// 存儲數(shù)據(jù)
localStorage.setItem("name", "張三");
localStorage.setItem("age", 20);
localStorage.setItem("gender", "男");

// 獲取數(shù)據(jù)
console.log(localStorage.getItem("name")); // 輸出: 張三

// 刪除數(shù)據(jù)
localStorage.removeItem("gender");

// 清除所有數(shù)據(jù)
localStorage.clear();

localStorage還可以通過添加時間戳和過期時間來手動設(shè)置數(shù)據(jù)的失效時間。由于localStorage只能存儲字符串，因此在存儲對象時需要將其轉(zhuǎn)換為JSON字符串，并在讀取時解析。

Storage.prototype.setExpire = (key, value, expire) => {
	let obj = {
	data: value,
	time: Date.now(),
	expire: expire
	};
	//localStorage 設(shè)置的值不能為對象,轉(zhuǎn)為json字符串
	localStorage.setItem(key, JSON.stringify(obj));
}

Storage.prototype.getExpire = key => {
    let val = localStorage.getItem(key);
    if (!val) {
        return val;
    }
    val = JSON.parse(val);
    if (Date.now() - val.time > val.expire) {
        localStorage.removeItem(key);
        return null;
    }
    return val.data;
}

//使用方法
localStorage.setExpire('userId','zhangsan',5000);
window.setInterval(()=>{
    console.log(localStorage.getExpire("userId"));
},1000)

總結(jié)
持久化存儲，就算窗口關(guān)閉也依然保留，除非手動刪除
頁面刷新數(shù)據(jù)不丟失
存儲范圍一般不超過5M
同一瀏覽器支持多窗口（多頁面）共享
假設(shè)同一個瀏覽器打開同源的三個頁面，.com/a.html;.com/b.html;**.com/c.html;那么這三個窗口是可以共享localstorage的
以鍵值對的形式保存
以localStorage.setItem(key,valueStr)保存值，valueStr必須是字符串,要存儲對象必須先字符串序列化，通過JSON.stringify()，取值的時候在通過JSON.parse()還原
以鍵取值
以value=localStorage.getItem(key)獲取值,如果不存在，返回null
受同源策略的限制
不同源的頁面不能訪問localStorage.比如在瀏覽器里面打開www.baidu.com/index.html存儲了一個localStorage;同樣在瀏覽器里面打開的www.ali.com/index.html就無法訪問到。因為他兩不同源
操作localstorage時，會觸發(fā)非當前頁面的storage事件
我們在A頁面設(shè)置了localStorage,就會觸發(fā)其他頁面的storage事件，這樣方便我們監(jiān)聽storage的狀態(tài)，做出后續(xù)的響應。比如在登錄頁完成登錄，把登錄成功的標志logSuc存儲在localStorage里面,localStorage.setItem(‘logSuc’,true);然后個人中心頁面就可以通過storage事件判斷出已經(jīng)登錄，并讀取個人信息進行預加載
支持單個刪除和全部刪除，分別通過removeItem(key)和clear()方法實現(xiàn)

三. javaScript本地存儲之 cookie

Cookie 是一些數(shù)據(jù), 存儲于你電腦上的文本文件中，用于存儲 web 頁面的用戶信息
Cookie 數(shù)據(jù)是以鍵值對的形式存在的，每個鍵值對都有過期時間。如果不設(shè)置時間，瀏覽器關(guān)閉，cookie就會消失，當然用戶也可以手動清除cookie
Cookie每次都會攜帶在HTTP頭中，如果使用cookie保存過多數(shù)據(jù)會帶來性能問題
Cookie內(nèi)存大小受限，一般每個域名下是4K左右，每個域名大概能存儲50個鍵值對

通過訪問document.cookie可以對cookie進行創(chuàng)建，修改與獲取。默認情況下，cookie 在瀏覽器關(guān)閉時刪除，你還可以為 cookie的某個鍵值對添加一個過期時間，如果設(shè)置新的cookie時，某個key已經(jīng)存在，則會更新這個key對應的值，否則他們會同時存在cookie中

// 設(shè)置cookie
document.cookie = "username=orochiz"
document.cookie = "age=20"

// 讀取cookie
var msg = document.cookie
console.log(msg) // username=orochiz; age=20

// 添加過期時間（單位：天）
var d = new Date() // 當前時間 2019-9-25
var days = 3       // 3天
d.setDate(d.getDate() + days)
document.cookie = "username=orochiz;"+"expires="+d

// 刪除cookie （給某個鍵值對設(shè)置過期的時間）
d.setDate(d.getDate() - 1)
console.log(document.cookie)

四. javaScript本地存儲之 indexDB

前面講的存儲方式都是以字符串的形式在存儲，假設(shè)我們現(xiàn)在的需求是要存儲大量結(jié)構(gòu)化的數(shù)據(jù)怎么辦，那就用indexDB
這是一個正兒八經(jīng)的數(shù)據(jù)庫，做服務(wù)端的同學都了解數(shù)據(jù)庫，這個跟數(shù)據(jù)庫沒啥的區(qū)別。只不過人家存在于客戶端而已。
那既然這樣，說明人家優(yōu)點很多，包括以下幾點
儲存量理論上沒有上限
所有操作都是異步的，相? LocalStorage 同步操作性能更?，尤其是數(shù)據(jù)量較?時
原??持儲存 JS 的對象
是個正經(jīng)的數(shù)據(jù)庫，意味著數(shù)據(jù)庫能?的事它都能?-那他具體怎么操作呢，都說了人家是數(shù)據(jù)庫，那就按數(shù)據(jù)庫的一般操作流程來唄
建立連接打開數(shù)據(jù)庫，操作數(shù)據(jù)庫增刪改查，只不過可能為了更好地使用客戶端，可能某些步驟或者程序上做了一些微調(diào)，那我們就實地操作一個

class DBOpration{
        constructor() {
            this.db = null
        }
        getType(val) {
            let type = typeof val == 'object'
            return type
        }
        // 打開數(shù)據(jù)庫
        open(parm) {
            return new Promise((res, rej) => {
                let request = window.indexedDB.open(parm.dbName, parm.versions)
                request.onerror = function(event) {
                    console.log(event)
                    // 錯誤處理
                    rej()
                    console.log(' 打開數(shù)據(jù)庫報錯')
                }
                request.onsuccess = event => {
                    this.db = request.result
                    console.log('打開數(shù)據(jù)庫成功')
                    res()
                    // 成功處理
                }
                // 數(shù)據(jù)庫更新時的回調(diào)
                request.onupgradeneeded = event => {
                    this.db = event.target.result
                    this.createdDB(parm)
                }
            })
        }
        // 創(chuàng)建庫表
        createdDB(parm) {
            console.log(parm)

            if (!this.db.objectStoreNames.contains(parm.objName)) {
                this.db.createObjectStore(parm.objName, {
                    keyPath: 'id'
                })
                // objectStore.createIndex("data", "data", { unique: false });
                // unique name可能會重復
            }
        }
        // 新增（不需要使用）
        async add(parm = { dbName, objName, param, response }) {
            await this.open(parm)
            // await this.upgrade(dbName);
            return new Promise((res, rej) => {
                let type = this.getType(parm.param)
                let type1 = this.getType(parm.response)
                let transaction = this.db.transaction([parm.objName], 'readwrite')
                let objectStore = transaction.objectStore(parm.objName)

                // 用戶讀取數(shù)據(jù)，參數(shù)是主鍵
                let request = objectStore.add({
                    id: type ? JSON.stringify(parm.param) : parm.param,
                    data: type1 ? JSON.stringify(parm.response) : parm.response
                })
                console.log(request)

                request.onsuccess = function(event) {
                    res(event)
                    console.log('數(shù)據(jù)寫入成功')
                }

                request.onerror = function(event) {
                    rej()
                    console.log('數(shù)據(jù)寫入失敗')
                }
            })
        }
        // 讀取庫表數(shù)據(jù)
        async read(parm = { dbName, objName, param, response }) {
            await this.open(parm)

            return new Promise((res, rej) => {
                let type = this.getType(parm.param)

                var transaction = this.db.transaction([parm.objName])
                var objectStore = transaction.objectStore(parm.objName)
                // 用戶讀取數(shù)據(jù)，參數(shù)是主鍵
                var request = objectStore.get(type ? JSON.stringify(parm.param) : parm.param)

                request.onerror = function(event) {
                    console.log('事務(wù)失敗')
                    rej()
                }

                request.onsuccess = function(event) {
                    if (request.result) {
                        let data = JSON.parse(request.result.data)
                        res(data)
                    } else {
                        res(request.result)
                        console.log('未獲得數(shù)據(jù)記錄')
                    }
                }
            })
        }
        // 修改庫表數(shù)據(jù),但是因為創(chuàng)建數(shù)據(jù)庫時直接創(chuàng)建了庫表,所以無論是添加還是修改都掉這個就可以了.
        async update(parm = { dbName, objName, param, response }) {
            await this.open(parm)

            return new Promise((res, rej) => {
                let type = this.getType(parm.param)
                let type1 = this.getType(parm.response)

                console.log(parm)
                var request = this.db
                    .transaction([parm.objName], 'readwrite')
                    .objectStore(parm.objName)
                    .put({
                        id: type ? JSON.stringify(parm.param) : parm.param,
                        data: type1 ? JSON.stringify(parm.response) : parm.response
                    })

                request.onsuccess = function(event) {
                    res()
                    console.log('數(shù)據(jù)更新成功')
                }

                request.onerror = function(event) {
                    rej()
                    console.log('數(shù)據(jù)更新失敗')
                }
            })
        }
        // 刪除某個表的數(shù)據(jù)
        async remove(parm = { dbName, objName, param, response }) {
            await this.open(parm)

            return new Promise((res, rej) => {
                let type = this.getType(parm.param)

                var request = this.db
                    .transaction([parm.objName], 'readwrite')
                    .objectStore(parm.objName)
                    .delete(type ? JSON.stringify(parm.param) : parm.param)

                request.onsuccess = function(event) {
                    res()
                    console.log('數(shù)據(jù)刪除成功')
                }
            })
        }
    }
let db=new DBOpration()//創(chuàng)建數(shù)據(jù)庫實例
//接下來增刪改查調(diào)取對應的方法就行

總結(jié)：localStorage，sessionStorage，cookie，indexDB不同存儲方式的使用場景

cookie，適用于標記用戶與跟蹤用戶行為
localStorage，適用于長期保存用戶的本地數(shù)據(jù)，比如token
sessionStorage,適合敏感賬號一次性登錄
indexDB，適合存儲大量結(jié)構(gòu)化數(shù)據(jù)，比如富文本編輯器的編輯歷史保存等

這四種本地存儲方式都保存在瀏覽器端，但它們有以下不同點：

cookie數(shù)據(jù)在每次HTTP請求中都會被發(fā)送到服務(wù)器，而sessionStorage和localStorage僅在本地保存。
cookie數(shù)據(jù)大小限制為4KB，而sessionStorage和localStorage可以達到5MB或更大。
sessionStorage僅在當前會話有效，localStorage始終有效，cookie則在設(shè)置的過期時間之前有效。
sessionStorage不在不同的瀏覽器窗口中共享，而localStorage和cookie在所有同源窗口中共享。
indexDB是數(shù)據(jù)庫，可以儲存大量數(shù)據(jù)，原??持儲存 JS 的對象，所有操作都是異步的，相? LocalStorage 同步操作性能更?

本地存儲提供了一種方便的方式來持久化用戶數(shù)據(jù)，但需要注意的是，它們都遵循同源策略，不同的網(wǎng)站之間不能共用相同的存儲空間。此外，由于localStorage和sessionStorage僅支持字符串類型的存儲，因此在存儲非字符串類型的數(shù)據(jù)時需要進行類型轉(zhuǎn)換。

以上就是javascript中本地存儲的4種方式及用法與使用場景匯總的詳細內(nèi)容，更多關(guān)于javascript中本地存儲的4種方式及用法的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: