快捷導(dǎo)航

JavaScript本地存儲(chǔ)的幾種方式小結(jié)

更新時(shí)間：2024年12月11日 11:04:13 作者：AitTech

在 JavaScript 中,本地存儲(chǔ)指的是將數(shù)據(jù)保存在用戶的瀏覽器中,能夠在頁(yè)面刷新或關(guān)閉后仍然保留,本文給大家介紹了本地存儲(chǔ)的幾種方式,每種存儲(chǔ)方式的特點(diǎn)、區(qū)別及應(yīng)用場(chǎng)景,需要的朋友可以參考下

在JavaScript中，有幾種常用的方式可以在本地存儲(chǔ)數(shù)據(jù)。以下是主要的幾種本地存儲(chǔ)方式：

LocalStorage:
- 描述: LocalStorage 是 Web Storage API 的一部分，用于在用戶的瀏覽器中存儲(chǔ)鍵值對(duì)。數(shù)據(jù)不會(huì)過(guò)期，除非用戶明確刪除。
- 用法：

// 存儲(chǔ)數(shù)據(jù)
localStorage.setItem('key', 'value');

// 獲取數(shù)據(jù)
const value = localStorage.getItem('key');

// 移除數(shù)據(jù)
localStorage.removeItem('key');

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

SessionStorage:

描述: SessionStorage 也是 Web Storage API 的一部分，與 LocalStorage 類似，但它存儲(chǔ)的數(shù)據(jù)在頁(yè)面會(huì)話結(jié)束時(shí)（如用戶關(guān)閉瀏覽器標(biāo)簽頁(yè)）會(huì)被清除。
用法:

// 存儲(chǔ)數(shù)據(jù)
sessionStorage.setItem('key', 'value');

// 獲取數(shù)據(jù)
const value = sessionStorage.getItem('key');

// 移除數(shù)據(jù)
sessionStorage.removeItem('key');

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

Cookies:

描述: Cookies 是小塊的數(shù)據(jù)，由瀏覽器存儲(chǔ)在用戶的計(jì)算機(jī)上。它們通常用于存儲(chǔ)會(huì)話信息或用戶偏好設(shè)置，并會(huì)在每次請(qǐng)求時(shí)發(fā)送到服務(wù)器。
用法:

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

// 讀取 Cookie
function getCookie(name) {
  let cookieArr = document.cookie.split(";");

  for(let i = 0; i < cookieArr.length; i++) {
    let cookiePair = cookieArr[i].split("=");

    if(name == cookiePair[0].trim()) {
      return decodeURIComponent(cookiePair[1]);
    }
  }

  return null;
}

const username = getCookie("username");

// 刪除 Cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

IndexedDB:

描述: IndexedDB 是一種低級(jí) API，用于在用戶的瀏覽器中存儲(chǔ)大量結(jié)構(gòu)化數(shù)據(jù)。它類似于 SQL 數(shù)據(jù)庫(kù)，但使用的是事務(wù)性數(shù)據(jù)庫(kù)模型。
用法:

// 打開(kāi)數(shù)據(jù)庫(kù)
let request = indexedDB.open("myDatabase", 1);

request.onupgradeneeded = function(event) {
  let db = event.target.result;
  let objectStore = db.createObjectStore("customers", { keyPath: "id" });
};

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

  // 添加數(shù)據(jù)
  let transaction = db.transaction(["customers"], "readwrite");
  let objectStore = transaction.objectStore("customers");
  let customer = {id: 1, name: "John Doe", age: 30};
  objectStore.add(customer);

  // 讀取數(shù)據(jù)
  let transaction = db.transaction(["customers"]);
  let objectStore = transaction.objectStore("customers");
  let request = objectStore.get(1);

  request.onerror = function(event) {
    console.log("Unable to retrieve data");
  };

  request.onsuccess = function(event) {
    if (request.result) {
      console.log(request.result.name);
    } else {
      console.log("No data found");
    }
  };
};

Web SQL (已廢棄):
- 描述: Web SQL 是一種早期的本地?cái)?shù)據(jù)庫(kù)技術(shù)，但已經(jīng)不被推薦使用，并且在現(xiàn)代瀏覽器中逐漸被淘汰。
- 用法: 不推薦使用，建議使用 IndexedDB 作為替代。

這些技術(shù)各有優(yōu)缺點(diǎn)，選擇哪一種取決于具體的應(yīng)用場(chǎng)景和需求。對(duì)于簡(jiǎn)單的鍵值對(duì)存儲(chǔ)，LocalStorage 和 SessionStorage 是很好的選擇；對(duì)于需要存儲(chǔ)更復(fù)雜和大量數(shù)據(jù)的情況，IndexedDB 更加合適；而 Cookies 則通常用于存儲(chǔ)需要在服務(wù)器和客戶端之間共享的信息。

以上就是JavaScript本地存儲(chǔ)的幾種方式小結(jié)的詳細(xì)內(nèi)容，更多關(guān)于JavaScript本地存儲(chǔ)方式的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: