js本地存储api集合，区别及使用场景介绍

localStorage

描述

localStorage 提供了一个持久化的存储方式，即使浏览器关闭后数据依然存在，直到被显式地删除。

常用方法和属性

方法/属性	参数说明	描述	示例代码
localStorage.setItem(key, value)	key (字符串), value (字符串)	将指定的 key 和 value 存储	localStorage.setItem('name', 'John');
localStorage.getItem(key)	key (字符串)	获取指定 key 的 value	localStorage.getItem('name'); // 'John'
localStorage.removeItem(key)	key (字符串)	删除指定 key 的数据	localStorage.removeItem('name');
localStorage.clear()	无	清空所有存储的数据	localStorage.clear();
localStorage.length	无	返回存储的键值对数量	localStorage.length; // 0
localStorage.key(index)	index (整数)	通过索引获取存储的 key	localStorage.key(0);

示例代码

// 存储数据
localStorage.setItem('username', 'Alice'); // 将键 'username' 和值 'Alice' 存储在 localStorage 中

// 获取数据
const user = localStorage.getItem('username'); // 获取键 'username' 对应的值
console.log(user); // 输出 'Alice'

// 删除数据
localStorage.removeItem('username'); // 删除键 'username' 及其对应的值

// 清空所有数据
localStorage.clear(); // 清空 localStorage 中的所有数据

sessionStorage

描述

sessionStorage 提供了一个会话级别的存储方式，数据只在页面会话期间有效。页面会话在浏览器打开页面时开始，并在关闭页面或浏览器时结束。

常用方法和属性

方法/属性	参数说明	描述	示例代码
sessionStorage.setItem(key, value)	key (字符串), value (字符串)	将指定的 key 和 value 存储	sessionStorage.setItem('sessionKey', 'value');
sessionStorage.getItem(key)	key (字符串)	获取指定 key 的 value	sessionStorage.getItem('sessionKey'); // 'value'
sessionStorage.removeItem(key)	key (字符串)	删除指定 key 的数据	sessionStorage.removeItem('sessionKey');
sessionStorage.clear()	无	清空所有存储的数据	sessionStorage.clear();
sessionStorage.length	无	返回存储的键值对数量	sessionStorage.length; // 0
sessionStorage.key(index)	index (整数)	通过索引获取存储的 key	sessionStorage.key(0);

示例代码

// 存储数据
sessionStorage.setItem('sessionKey', 'sessionValue'); // 将键 'sessionKey' 和值 'sessionValue' 存储在 sessionStorage 中

// 获取数据
const sessionData = sessionStorage.getItem('sessionKey'); // 获取键 'sessionKey' 对应的值
console.log(sessionData); // 输出 'sessionValue'

// 删除数据
sessionStorage.removeItem('sessionKey'); // 删除键 'sessionKey' 及其对应的值

// 清空所有数据
sessionStorage.clear(); // 清空 sessionStorage 中的所有数据

IndexedDB

描述

IndexedDB 是一个低级 API，用于在客户端存储大量的结构化数据。它是一个事务型的数据库系统，允许存储和检索复杂的数据结构，包括文件和二进制数据。

常用方法和属性

方法/属性	参数说明	描述	示例代码
indexedDB.open(name, version)	name (字符串), version (整数, 可选)	打开一个数据库，如果不存在则创建	const request = indexedDB.open('myDatabase', 1);
request.onsuccess	回调函数	当数据库打开成功时触发	request.onsuccess = (event) => { const db = event.target.result; };
request.onerror	回调函数	当数据库打开失败时触发	request.onerror = (event) => { console.error('Database error:', event.target.error); };
db.createObjectStore(name, options)	name (字符串), options (对象, 可选)	创建一个对象存储（表）	db.createObjectStore('users', { keyPath: 'id' });
objectStore.add(value)	value (对象)	向对象存储中添加一个新对象	objectStore.add({ id: 1, name: 'Alice' });

示例代码

// 打开数据库
const request = indexedDB.open('myDatabase', 1);

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  // 创建对象存储
  const objectStore = db.createObjectStore('users', { keyPath: 'id' });
};

request.onsuccess = (event) => {
  const db = event.target.result;
  // 事务
  const transaction = db.transaction('users', 'readwrite');
  const objectStore = transaction.objectStore('users');
  // 添加数据
  objectStore.add({ id: 1, name: 'Alice' });
};

request.onerror = (event) => {
  console.error('Database error:', event.target.error);
};

Cookie

描述

Cookie 是一种在客户端存储少量数据的方式，通常用于存储用户的会话信息和偏好设置。Cookie 数据会随每个 HTTP 请求一起发送到服务器。

常用操作

操作	参数说明	描述	示例代码
设置 Cookie	name (字符串), value (字符串), expires (日期字符串, 可选), path (字符串, 可选)	设置一个新的 Cookie	document.cookie = "username=John";
获取所有 Cookie	无	获取所有 Cookie 的字符串	const cookies = document.cookie;
删除 Cookie	name (字符串)	通过设置过期时间来删除 Cookie	document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

示例代码

// 设置 Cookie
document.cookie = "username=John; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

// 获取所有 Cookie
const cookies = document.cookie;
console.log(cookies); // 输出所有 Cookie 的字符串，如 "username=John; sessionToken=abc123"

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

区别与使用场景

API	持久性	存储大小	数据结构	典型使用场景
localStorage	持久（直到被删除）	约 5-10 MB	字符串	存储长期不变的用户设置、状态等
sessionStorage	会话级别	约 5-10 MB	字符串	存储会话数据，如临时表单数据、会话信息
IndexedDB	持久（直到被删除）	大量数据（理论上无限制）	结构化数据（对象）	存储大量结构化数据，如离线缓存、复杂数据存储
Cookie	根据设置的过期时间来确定持久性	约 4 KB	字符串	存储会话信息、用户偏好、追踪信息

通过这些存储方式，开发者可以根据具体需求选择合适的本地存储方案，从而更好地管理和利用客户端数据。