一、WEB瀏覽器本地存儲(chǔ)方式及特點(diǎn)

1.1 儲(chǔ)存方式

1. Cookie

存儲(chǔ)容量：約 4KB（每個(gè)域名）。

生命周期：可設(shè)置過期時(shí)間；默認(rèn)隨會(huì)話結(jié)束失效。

作用域：同源頁(yè)面共享。

訪問方式：通過 document.cookie 讀寫，每次HTTP請(qǐng)求自動(dòng)攜帶。

特點(diǎn)：支持服務(wù)器端操作（通過HTTP頭），但存儲(chǔ)效率低，易被XSS攻擊。

// 設(shè)置 Cookie
function setCookie(name, value, days) {
    let expires = "";
    if (days) {
        const date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "") + expires + "; path=/";
}

// 獲取 Cookie
function getCookie(name) {
    const nameEQ = name + "=";
    const ca = document.cookie.split(';');
    for (let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) === ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

// 刪除 Cookie
function deleteCookie(name) {
    document.cookie = name + '=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}

// 使用示例
setCookie('username', 'John', 7);
const username = getCookie('username');
console.log(username); 
deleteCookie('username');

2. Web Storage

localStorage

存儲(chǔ)容量：約 5-10MB（不同瀏覽器）。

生命周期：永久存儲(chǔ)，需手動(dòng)清除。

作用域：同源頁(yè)面共享。

訪問方式：同步API，鍵值對(duì)存儲(chǔ)（僅支持字符串，需用JSON轉(zhuǎn)換對(duì)象）。

// 存儲(chǔ)數(shù)據(jù)
localStorage.setItem('key', 'value');
// 獲取數(shù)據(jù)
const storageKey = localStorage.getItem('key');
// 刪除數(shù)據(jù)
localStorage.removeItem('key');
// 清除所有數(shù)據(jù)
localStorage.clear();

sessionStorage

存儲(chǔ)容量：同 localStorage。

生命周期：頁(yè)面會(huì)話結(jié)束（關(guān)閉標(biāo)簽頁(yè)）即清除。

作用域：僅當(dāng)前標(biāo)簽頁(yè)內(nèi)共享。

訪問方式：同 localStorage。

// 存儲(chǔ)數(shù)據(jù)
sessionStorage.setItem('key', 'value');
// 獲取數(shù)據(jù)
const storageKey = sessionStorage.getItem('key');
// 刪除數(shù)據(jù)
sessionStorage.removeItem('key');
// 清除所有數(shù)據(jù)
sessionStorage.clear();

3. IndexedDB

存儲(chǔ)容量：動(dòng)態(tài)分配，通常 50% 磁盤空間（瀏覽器策略限制）。

生命周期：永久存儲(chǔ)，需手動(dòng)清除。

作用域：同源頁(yè)面共享。

訪問方式：異步API，支持事務(wù)、索引和結(jié)構(gòu)化數(shù)據(jù)（包括文件）。

特點(diǎn)：適合復(fù)雜查詢和大數(shù)據(jù)存儲(chǔ)，但API較復(fù)雜。

// 打開數(shù)據(jù)庫(kù)
const request = indexedDB.open('myDatabase', 1);

// 數(shù)據(jù)庫(kù)升級(jí)時(shí)觸發(fā)
request.onupgradeneeded = function(event) {
    const db = event.target.result;
    const objectStore = db.createObjectStore('users', { keyPath: 'id' });
    objectStore.createIndex('name', 'name', { unique: false });
};

// 打開數(shù)據(jù)庫(kù)成功
request.onsuccess = function(event) {
    const db = event.target.result;
    const transaction = db.transaction(['users'], 'readwrite');
    const objectStore = transaction.objectStore('users');

    // 添加數(shù)據(jù)
    const user = { id: 1, name: 'John' };
    const addRequest = objectStore.add(user);
    addRequest.onsuccess = function(event) {
        console.log('Data added successfully');
    };

    // 獲取數(shù)據(jù)
    const getRequest = objectStore.get(1);
    getRequest.onsuccess = function(event) {
        const data = event.target.result;
        console.log(data);
    };

    // 關(guān)閉數(shù)據(jù)庫(kù)
    transaction.oncomplete = function() {
        db.close();
    };
};

// 打開數(shù)據(jù)庫(kù)失敗
request.onerror = function(event) {
    console.error('Database error: ', event.target.errorCode);
};

4. Cache API

存儲(chǔ)容量：動(dòng)態(tài)分配，依賴瀏覽器限制。

生命周期：需手動(dòng)管理（Service Worker控制）。

作用域：同源，用于緩存網(wǎng)絡(luò)請(qǐng)求。

訪問方式：異步API，存儲(chǔ)請(qǐng)求-響應(yīng)對(duì)。

特點(diǎn)：主要用于PWA離線資源緩存。

1.2 核心區(qū)別對(duì)比

1.3 應(yīng)用場(chǎng)景

Cookie

• 用戶登錄狀態(tài)（Session ID）。
• 跟蹤用戶行為（需注意隱私合規(guī)性）。

localStorage

• 長(zhǎng)期保存的用戶配置（如主題、語(yǔ)言）。
• 緩存靜態(tài)資源（如不常變化的JSON數(shù)據(jù)）。

sessionStorage

• 單頁(yè)面表單的臨時(shí)保存（避免頁(yè)面刷新丟失）。
• 當(dāng)前會(huì)話的臨時(shí)狀態(tài)（如分頁(yè)參數(shù)）。

IndexedDB

• 離線應(yīng)用的核心數(shù)據(jù)存儲(chǔ)（如郵件客戶端、文檔編輯器）。
• 需要復(fù)雜查詢的大數(shù)據(jù)集（如本地?cái)?shù)據(jù)庫(kù)）。

Cache API

• PWA的靜態(tài)資源離線緩存（HTML/CSS/JS/圖片）。
• 加速重復(fù)訪問的資源加載。

1.4 安全性注意事項(xiàng)

• Cookie：優(yōu)先設(shè)置 HttpOnly 和 Secure 防止XSS和中間人攻擊。
• Web Storage：避免存儲(chǔ)敏感信息，易受XSS攻擊。
• IndexedDB：需處理數(shù)據(jù)加密（如用戶隱私數(shù)據(jù)）。

根據(jù)需求選擇合適存儲(chǔ)方式，平衡容量、性能與安全性。

二、APP與小程序

2.1 原生APP

1. iOS

NSUserDefaults：是一個(gè)輕量級(jí)的鍵值對(duì)存儲(chǔ)系統(tǒng)，適合存儲(chǔ)用戶偏好設(shè)置、簡(jiǎn)單的配置信息等，例如用戶是否開啟夜間模式、字體大小設(shè)置等。數(shù)據(jù)存儲(chǔ)在應(yīng)用沙盒的特定文件中，使用方便，能存儲(chǔ)基本數(shù)據(jù)類型、數(shù)組、字典等。

Core Data：是蘋果提供的一個(gè)對(duì)象圖管理和持久化框架，用于管理應(yīng)用程序中的數(shù)據(jù)模型。它可以將數(shù)據(jù)存儲(chǔ)到 SQLite 數(shù)據(jù)庫(kù)中，適合存儲(chǔ)復(fù)雜的、有結(jié)構(gòu)的數(shù)據(jù)，如社交應(yīng)用中的用戶關(guān)系、筆記應(yīng)用中的筆記信息等

File System：可以直接操作文件系統(tǒng)來(lái)存儲(chǔ)和讀取數(shù)據(jù)，適合存儲(chǔ)較大的文件，如圖片、音頻、視頻等。應(yīng)用可以在應(yīng)用沙盒的指定目錄下創(chuàng)建文件，并進(jìn)行讀寫操作。

2. Android

SharedPreferences：以鍵值對(duì)的形式存儲(chǔ)簡(jiǎn)單的數(shù)據(jù)，數(shù)據(jù)存儲(chǔ)在 XML 文件中。常用于存儲(chǔ)用戶的登錄狀態(tài)、應(yīng)用的配置信息等，例如用戶的用戶名、用戶選擇的主題等。

SQLite Database：是一個(gè)輕量級(jí)的嵌入式數(shù)據(jù)庫(kù)，適合存儲(chǔ)結(jié)構(gòu)化的數(shù)據(jù)，如聯(lián)系人信息、任務(wù)列表等。通過 SQLiteOpenHelper 類可以方便地創(chuàng)建、管理和操作數(shù)據(jù)庫(kù)。

Internal Storage 和 External Storage：Internal Storage 用于在設(shè)備內(nèi)部存儲(chǔ)應(yīng)用的私有數(shù)據(jù)，如應(yīng)用的配置文件、臨時(shí)數(shù)據(jù)等；External Storage 可用于存儲(chǔ)一些共享的文件，如圖片、下載的文件等，但需要注意權(quán)限問題。

2.2 跨平臺(tái) APP

AsyncStorage（React Native）：是 React Native 提供的一個(gè)簡(jiǎn)單的、異步的、持久化的鍵值對(duì)存儲(chǔ)系統(tǒng)，類似于 Web 中的 localStorage。它適用于存儲(chǔ)少量的、簡(jiǎn)單的數(shù)據(jù)，如用戶的登錄令牌、應(yīng)用的一些簡(jiǎn)單配置等

SharedPreferences（Flutter 中的 shared_preferences 插件）：功能類似于 Android 的 SharedPreferences，提供了簡(jiǎn)單的鍵值對(duì)存儲(chǔ)功能，方便在 Flutter 應(yīng)用中存儲(chǔ)和讀取數(shù)據(jù)。

SQLite（Flutter 中的 sqflite 插件）：可以在 Flutter 應(yīng)用中使用 SQLite 數(shù)據(jù)庫(kù)來(lái)存儲(chǔ)結(jié)構(gòu)化的數(shù)據(jù)，其使用方式與原生 Android 中的 SQLite 類似。

2.3 小程序

微信小程序

• wx.setStorage 和 wx.getStorage：這是微信小程序提供的基本的本地存儲(chǔ) API，以鍵值對(duì)的形式存儲(chǔ)數(shù)據(jù)?？梢源鎯?chǔ)字符串、數(shù)字、對(duì)象等數(shù)據(jù)類型，適合存儲(chǔ)用戶的瀏覽記錄、緩存的頁(yè)面數(shù)據(jù)等。
• wx.setStorageSync 和 wx.getStorageSync：是同步版本的存儲(chǔ)和讀取 API，使用起來(lái)更簡(jiǎn)單，但可能會(huì)阻塞主線程，影響性能，因此建議在數(shù)據(jù)量較小且對(duì)性能要求不高的場(chǎng)景下使用。

支付寶小程序

• my.setStorage 和 my.getStorage：與微信小程序類似，也是以鍵值對(duì)的形式存儲(chǔ)數(shù)據(jù)，可用于存儲(chǔ)用戶的偏好設(shè)置、臨時(shí)數(shù)據(jù)等。
• my.setStorageSync 和 my.getStorageSync：同步版本的存儲(chǔ)和讀取 API，使用時(shí)需注意性能問題。

2.4 區(qū)別

1.存儲(chǔ)容量

APP：原生 APP 可以根據(jù)需要使用文件系統(tǒng)和數(shù)據(jù)庫(kù)存儲(chǔ)大量的數(shù)據(jù)，理論上只要設(shè)備存儲(chǔ)空間允許，存儲(chǔ)容量可以很大。例如，一些視頻播放 APP 可以將大量的視頻文件緩存到本地。

小程序：小程序的本地存儲(chǔ)容量通常有限制，如微信小程序單個(gè) key 允許存儲(chǔ)的最大數(shù)據(jù)長(zhǎng)度為 1MB，所有數(shù)據(jù)存儲(chǔ)上限為 10MB。這是為了避免小程序占用過多的設(shè)備存儲(chǔ)空間。

2.數(shù)據(jù)安全性

APP：原生 APP 可以通過應(yīng)用沙盒機(jī)制來(lái)保護(hù)數(shù)據(jù)的安全性，數(shù)據(jù)只能被應(yīng)用本身訪問。同時(shí)，還可以使用加密技術(shù)對(duì)敏感數(shù)據(jù)進(jìn)行加密存儲(chǔ)，如用戶的密碼、支付信息等。

小程序：小程序的數(shù)據(jù)存儲(chǔ)在用戶的設(shè)備上，但由于小程序的運(yùn)行環(huán)境相對(duì)開放，數(shù)據(jù)的安全性相對(duì)較低。雖然小程序平臺(tái)也會(huì)采取一些安全措施，但在處理敏感數(shù)據(jù)時(shí)仍需謹(jǐn)慎。

3.使用便捷性

APP：原生 APP 的存儲(chǔ)方式相對(duì)復(fù)雜，需要掌握不同平臺(tái)的存儲(chǔ) API 和數(shù)據(jù)庫(kù)操作方法?？缙脚_(tái) APP 雖然提供了統(tǒng)一的存儲(chǔ)接口，但也需要了解相應(yīng)的插件和使用方法。

小程序：小程序的存儲(chǔ) API 簡(jiǎn)單易用，開發(fā)人員可以快速上手，使用起來(lái)更加便捷。

2.5 應(yīng)用場(chǎng)景

APP

• 大量數(shù)據(jù)存儲(chǔ)：當(dāng)應(yīng)用需要存儲(chǔ)大量的結(jié)構(gòu)化數(shù)據(jù)或文件時(shí)，如電商 APP 的商品信息、音樂 APP 的歌曲文件等，適合使用數(shù)據(jù)庫(kù)或文件系統(tǒng)進(jìn)行存儲(chǔ)。
• 復(fù)雜數(shù)據(jù)管理：對(duì)于需要進(jìn)行復(fù)雜數(shù)據(jù)管理和操作的應(yīng)用，如社交 APP 的用戶關(guān)系管理、辦公 APP 的文檔管理等，使用數(shù)據(jù)庫(kù)存儲(chǔ)可以更好地滿足需求。
• 敏感數(shù)據(jù)處理：當(dāng)應(yīng)用需要處理敏感數(shù)據(jù)時(shí)，如金融 APP 的用戶賬戶信息、醫(yī)療 APP 的患者健康數(shù)據(jù)等，原生 APP 可以通過加密和安全機(jī)制來(lái)保證數(shù)據(jù)的安全性。

小程序

• 臨時(shí)數(shù)據(jù)緩存：小程序可以將用戶的瀏覽記錄、搜索歷史等臨時(shí)數(shù)據(jù)存儲(chǔ)在本地，以提高用戶體驗(yàn)。例如，新聞小程序可以緩存用戶最近瀏覽的新聞文章，方便用戶離線閱讀。
• 簡(jiǎn)單配置信息存儲(chǔ)：對(duì)于一些簡(jiǎn)單的應(yīng)用配置信息，如用戶的字體大小設(shè)置、主題顏色選擇等，可以使用小程序的本地存儲(chǔ)功能進(jìn)行存儲(chǔ)。
• 快速開發(fā)場(chǎng)景：由于小程序的存儲(chǔ) API 簡(jiǎn)單易用，適合在快速開發(fā)的場(chǎng)景中使用，如一些簡(jiǎn)單的工具類小程序、活動(dòng)推廣小程序等。

以上就是JavaScript前端中實(shí)現(xiàn)本地儲(chǔ)存的常用方式繪制的詳細(xì)內(nèi)容，更多關(guān)于前端本地儲(chǔ)存的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！