当前位置：首页 > JavaScript

js实现storage

2026-04-05 09:13:13JavaScript

使用 localStorage 实现本地存储

localStorage 允许在浏览器中存储键值对数据，数据不会过期，除非手动清除

// 存储数据
localStorage.setItem('key', 'value');

// 获取数据
const data = localStorage.getItem('key');

// 移除单个数据
localStorage.removeItem('key');

// 清空所有存储
localStorage.clear();

使用 sessionStorage 实现会话存储

sessionStorage 与 localStorage 类似，但数据仅在当前会话有效，关闭标签页后数据会被清除

js实现storage

// 存储数据
sessionStorage.setItem('sessionKey', 'sessionValue');

// 获取数据
const sessionData = sessionStorage.getItem('sessionKey');

使用 IndexedDB 实现结构化存储

IndexedDB 适合存储大量结构化数据，提供索引功能实现高效查询

js实现storage

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

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  const store = db.createObjectStore('customers', {keyPath: 'id'});
  store.createIndex('name', 'name', {unique: false});
};

request.onsuccess = (event) => {
  const db = event.target.result;
  const transaction = db.transaction('customers', 'readwrite');
  const store = transaction.objectStore('customers');

  // 添加数据
  store.add({id: 1, name: 'John', email: 'john@example.com'});

  // 查询数据
  const getRequest = store.get(1);
  getRequest.onsuccess = () => {
    console.log(getRequest.result);
  };
};

使用 Cookies 实现小数据存储

Cookies 适合存储少量数据，可设置过期时间

// 设置cookie
document.cookie = 'username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/';

// 读取cookie
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

使用 Web SQL 实现关系型存储（已废弃）

虽然 Web SQL 已被废弃，但在某些旧浏览器中仍可使用

// 创建数据库
const db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

// 执行SQL
db.transaction(function (tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
  tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "first log")');
});