当前位置：首页 > news >正文

JavaScript本地存储的方式有哪些

news 2024/12/26 21:01:47

在JavaScript中，有几种常用的方式可以在本地存储数据。以下是主要的几种本地存储方式：

LocalStorage:

描述: LocalStorage 是 Web Storage API 的一部分，用于在用户的浏览器中存储键值对。数据不会过期，除非用户明确删除。

用法:

// 存储数据
localStorage.setItem('key', 'value');// 获取数据
const value = localStorage.getItem('key');// 移除数据
localStorage.removeItem('key');// 清除所有数据
localStorage.clear();

SessionStorage:

描述: SessionStorage 也是 Web Storage API 的一部分，与 LocalStorage 类似，但它存储的数据在页面会话结束时（如用户关闭浏览器标签页）会被清除。

用法:

// 存储数据
sessionStorage.setItem('key', 'value');// 获取数据
const value = sessionStorage.getItem('key');// 移除数据
sessionStorage.removeItem('key');// 清除所有数据
sessionStorage.clear();

Cookies:

描述: Cookies 是小块的数据，由浏览器存储在用户的计算机上。它们通常用于存储会话信息或用户偏好设置，并会在每次请求时发送到服务器。

用法:

// 设置 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 是一种低级 API，用于在用户的浏览器中存储大量结构化数据。它类似于 SQL 数据库，但使用的是事务性数据库模型。

用法:

// 打开数据库
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;// 添加数据let transaction = db.transaction(["customers"], "readwrite");let objectStore = transaction.objectStore("customers");let customer = {id: 1, name: "John Doe", age: 30};objectStore.add(customer);// 读取数据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");}};
};