一、WEB瀏覽器本地存儲方式及特點

1.1 儲存方式

1. Cookie

存儲容量：約 4KB（每個域名）。

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

作用域：同源頁面共享。

訪問方式：通過 document.cookie 讀寫，每次HTTP請求自動攜帶。

特點：支持服務(wù)器端操作（通過HTTP頭），但存儲效率低，易被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

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

生命周期：永久存儲，需手動清除。

作用域：同源頁面共享。

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

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

sessionStorage

存儲容量：同 localStorage。

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

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

訪問方式：同 localStorage。

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

3. IndexedDB

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

生命周期：永久存儲，需手動清除。

作用域：同源頁面共享。

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

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

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

// 數(shù)據(jù)庫升級時觸發(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ù)庫成功
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ù)庫
    transaction.oncomplete = function() {
        db.close();
    };
};

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

4. Cache API

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

生命周期：需手動管理（Service Worker控制）。

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

訪問方式：異步API，存儲請求-響應(yīng)對。

特點：主要用于PWA離線資源緩存。

1.2 核心區(qū)別對比

1.3 應(yīng)用場景

Cookie

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

localStorage

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

sessionStorage

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

IndexedDB

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

Cache API

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

1.4 安全性注意事項

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

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

二、APP與小程序

2.1 原生APP

1. iOS

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

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

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

2. Android

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

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

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

2.2 跨平臺 APP

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

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

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

2.3 小程序

微信小程序

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

支付寶小程序

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

2.4 區(qū)別

1.存儲容量

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

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

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

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

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

3.使用便捷性

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

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

2.5 應(yīng)用場景

APP

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

小程序

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

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

最新評論