1. Cookies

Cookies 是瀏覽器用來存儲數(shù)據(jù)的小文件，通常用于存儲一些小量的數(shù)據(jù)，尤其是會話信息（如用戶認(rèn)證信息）。它們在客戶端存儲，可以跨頁面訪問，并且可以配置過期時間。

特點：

• 存儲大小：每個 cookie 大小限制為 4KB。
• 有效期：可以設(shè)置過期時間（默認(rèn)是會話結(jié)束后失效）。
• 跨頁面共享：同一域名下的頁面可以共享 cookies。
• 請求時自動發(fā)送：每次發(fā)送請求時，瀏覽器會自動將相關(guān)的 cookies 發(fā)送到服務(wù)器，適用于身份驗證等。

示例：

// 設(shè)置 cookie
document.cookie = "username=John; expires=Fri, 31 Dec 2024 23:59:59 GMT";

// 獲取 cookie
let cookies = document.cookie;
console.log(cookies);

// 刪除 cookie（通過設(shè)置過期時間為過去的日期）
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

缺點：

• 數(shù)據(jù)存儲量小（4KB）。
• 數(shù)據(jù)會隨著每次請求一起發(fā)送到服務(wù)器，增加網(wǎng)絡(luò)負(fù)擔(dān)。
• 安全性較差，容易受到跨站腳本攻擊（XSS）。

2. LocalStorage

localStorage 提供了一種存儲在客戶端的數(shù)據(jù)存儲方式，數(shù)據(jù)存儲在瀏覽器中，即使頁面關(guān)閉，數(shù)據(jù)依然會保留，直到顯式刪除。

特點：

• 存儲大小：大約 5MB（不同瀏覽器可能有所不同）。
• 存儲方式：數(shù)據(jù)以鍵值對的形式存儲。
• 生命周期：數(shù)據(jù)永久存儲，直到顯式刪除或瀏覽器的存儲空間被清除。
• 僅客戶端訪問：localStorage 只能在客戶端訪問，不能跨窗口或跨標(biāo)簽頁訪問。

示例：

// 設(shè)置 localStorage
localStorage.setItem('username', 'John');

// 獲取 localStorage
let username = localStorage.getItem('username');
console.log(username); // "John"

// 刪除 localStorage
localStorage.removeItem('username');

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

優(yōu)點：

• 存儲容量大（相比 cookies）。
• 數(shù)據(jù)在瀏覽器關(guān)閉后依然保持有效。
• API 簡單，支持同步操作。

缺點：

• 數(shù)據(jù)僅限于客戶端存儲，無法跨客戶端同步。
• 存儲的內(nèi)容可以被 JavaScript 腳本訪問，因此需要小心敏感數(shù)據(jù)的存儲。
• 不支持跨域訪問（每個域名下獨(dú)立存儲）。

3. SessionStorage

sessionStorage 是一種基于會話的存儲方式，它與 localStorage 類似，但數(shù)據(jù)在瀏覽器窗口或標(biāo)簽頁關(guān)閉時會自動清除。每個瀏覽器標(biāo)簽頁或窗口都有獨(dú)立的 sessionStorage。

特點：

• 存儲大小：與 localStorage 類似，通常為 5MB。
• 生命周期：數(shù)據(jù)在瀏覽器會話期間有效，瀏覽器關(guān)閉時即丟失。
• 僅限同一會話：不同標(biāo)簽頁或窗口中的 sessionStorage 不共享。

示例：

// 設(shè)置 sessionStorage
sessionStorage.setItem('sessionKey', 'value');

// 獲取 sessionStorage
let value = sessionStorage.getItem('sessionKey');
console.log(value); // "value"

// 刪除 sessionStorage
sessionStorage.removeItem('sessionKey');

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

優(yōu)點：

• 存儲容量大。
• 會話級別的數(shù)據(jù)存儲，關(guān)閉瀏覽器窗口或標(biāo)簽頁時會自動清空。
• 簡單易用。

缺點：

• 數(shù)據(jù)存儲只在會話期間有效，無法在不同會話中共享。

4. IndexedDB

IndexedDB 是一種低級別的 API，用于存儲大量結(jié)構(gòu)化數(shù)據(jù)。它允許你存儲更復(fù)雜的數(shù)據(jù)類型，如文件和二進(jìn)制數(shù)據(jù)，并且支持異步操作。

特點：

• 存儲容量：沒有嚴(yán)格的大小限制，通?？梢源鎯?shù) MB 或更多的數(shù)據(jù)。
• 數(shù)據(jù)類型：可以存儲對象、數(shù)組、文件等復(fù)雜類型。
• 異步操作：支持異步操作，因此不會阻塞主線程。
• 瀏覽器支持：大多數(shù)現(xiàn)代瀏覽器都支持 IndexedDB。

示例：

// 打開（或創(chuàng)建）數(shù)據(jù)庫
let request = indexedDB.open("MyDatabase", 1);

request.onsuccess = function(event) {
  let db = event.target.result;

  // 創(chuàng)建一個對象存儲
  let objectStore = db.createObjectStore("users", { keyPath: "id" });

  // 插入數(shù)據(jù)
  objectStore.add({ id: 1, name: "John", age: 30 });

  // 獲取數(shù)據(jù)
  let getRequest = objectStore.get(1);
  getRequest.onsuccess = function() {
    console.log(getRequest.result); // { id: 1, name: "John", age: 30 }
  };
};

request.onerror = function(event) {
  console.error("Database error:", event.target.errorCode);
};

優(yōu)點：

• 支持存儲復(fù)雜的數(shù)據(jù)（如對象、數(shù)組、二進(jìn)制數(shù)據(jù)）。
• 存儲量大。
• 支持異步操作，不會阻塞 UI 線程。
• 可以創(chuàng)建索引，以加速數(shù)據(jù)檢索。

缺點：

• API 比較復(fù)雜，使用上相對繁瑣。
• 數(shù)據(jù)存儲和檢索速度可能會受到存儲量和索引的影響。

5. Web SQL Database（已廢棄）

Web SQL 是一種基于 SQL 的本地數(shù)據(jù)庫 API，它可以在瀏覽器中存儲結(jié)構(gòu)化的數(shù)據(jù)，使用類似于 SQL 的語法進(jìn)行操作。這個 API 已被大多數(shù)瀏覽器棄用，推薦使用 IndexedDB。

示例：

let db = openDatabase('MyDatabase', '1.0', 'Test Database', 2 * 1024 * 1024);

// 創(chuàng)建表格
db.transaction(function (tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
});

// 插入數(shù)據(jù)
db.transaction(function (tx) {
  tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
});

特點：

• 基于 SQL，數(shù)據(jù)存儲和查詢類似于傳統(tǒng)的數(shù)據(jù)庫。
• 數(shù)據(jù)較為結(jié)構(gòu)化。

缺點：

• 已被棄用，不推薦使用。
• 目前只有部分瀏覽器支持。

6. File System API (僅限于瀏覽器擴(kuò)展或特定環(huán)境)

File System API 提供了更接近操作本地文件系統(tǒng)的能力，允許瀏覽器內(nèi)的 Web 應(yīng)用讀寫本地文件。這個 API 目前僅在特定的瀏覽器環(huán)境或擴(kuò)展中可用，且并非所有瀏覽器都支持。

特點：

• 允許更直接的文件操作，如讀取、寫入和管理文件。
• 安全性較高，需要特定的權(quán)限。

缺點：

• 僅限特定環(huán)境或擴(kuò)展，且使用較為復(fù)雜。

總結(jié)：

根據(jù)應(yīng)用需求選擇合適的存儲方式，通常情況下 localStorage 和 sessionStorage 比較簡單易用，而對于需要存儲大量或復(fù)雜數(shù)據(jù)的情況，可以使用 IndexedDB。

以上就是前端本地數(shù)據(jù)存儲的幾種常見方式總結(jié)的詳細(xì)內(nèi)容，更多關(guān)于前端本地數(shù)據(jù)存儲的資料請關(guān)注腳本之家其它相關(guān)文章！