当前位置：首页 > JavaScript

js实现数据存储

2026-01-30 22:26:34JavaScript

本地存储（LocalStorage）

LocalStorage 是一种在浏览器中存储数据的机制，数据以键值对形式存储，且不会随页面刷新或关闭而丢失。适合存储简单的字符串数据。

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

// 读取数据
const value = localStorage.getItem('key');

// 删除数据
localStorage.removeItem('key');

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

会话存储（SessionStorage）

SessionStorage 与 LocalStorage 类似，但数据仅在当前会话有效，关闭标签页或浏览器后数据会被清除。

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

// 读取数据
const value = sessionStorage.getItem('key');

// 删除数据
sessionStorage.removeItem('key');

Cookie

Cookie 是一种传统的客户端存储方式，数据会随 HTTP 请求发送到服务器。适合存储小量数据，但需注意大小限制（通常为 4KB）。

js实现数据存储

// 设置 Cookie
document.cookie = 'key=value; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/';

// 读取 Cookie
const cookies = document.cookie.split(';').reduce((acc, cookie) => {
  const [key, value] = cookie.trim().split('=');
  acc[key] = value;
  return acc;
}, {});

// 删除 Cookie（通过设置过期时间为过去）
document.cookie = 'key=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';

IndexedDB

IndexedDB 是一种低级 API，适合存储大量结构化数据。支持事务和索引查询，适合复杂应用。

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

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  const store = db.createObjectStore('myStore', { keyPath: 'id' });
};

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

  // 添加数据
  store.add({ id: 1, name: 'Data' });

  // 读取数据
  const getRequest = store.get(1);
  getRequest.onsuccess = () => console.log(getRequest.result);
};

Web SQL（已废弃）

Web SQL 是一种基于 SQL 的存储方式，但已被废弃，不建议在新项目中使用。

js实现数据存储

// 示例代码（仅作参考）
const db = openDatabase('myDB', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction((tx) => {
  tx.executeSql('CREATE TABLE IF NOT EXISTS myTable (id, name)');
  tx.executeSql('INSERT INTO myTable VALUES (?, ?)', [1, 'Data']);
});

文件存储（File API）

File API 允许通过 JavaScript 访问用户本地文件，适合处理文件数据。

// 读取文件
const input = document.createElement('input');
input.type = 'file';
input.onchange = (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();
  reader.onload = (event) => console.log(event.target.result);
  reader.readAsText(file);
};
document.body.appendChild(input);

第三方库（如 PouchDB）

PouchDB 是一个开源的 JavaScript 数据库，支持与 CouchDB 同步，适合离线应用。

// 安装 PouchDB 后使用
const db = new PouchDB('myDB');
db.put({ _id: '1', name: 'Data' }).then(() => {
  return db.get('1');
}).then(doc => console.log(doc));