当前位置：首页 > JavaScript

js实现保存

2026-03-14 19:24:58JavaScript

使用localStorage保存数据

localStorage是浏览器提供的本地存储方案，适合保存较小量的数据（通常5MB左右）。数据会持久化存储，即使关闭浏览器也不会丢失。

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

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

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

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

使用sessionStorage保存会话数据

sessionStorage与localStorage类似，但数据只在当前会话期间有效，关闭浏览器标签页后数据会被清除。

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

// 读取数据
const sessionValue = sessionStorage.getItem('sessionKey');

使用IndexedDB存储大量结构化数据

IndexedDB适合存储大量结构化数据，支持索引查询和事务操作。

// 打开或创建数据库
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: 'Item 1' });

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

使用Cookies保存小量数据

Cookies适合保存少量数据（约4KB），每次HTTP请求都会自动发送到服务器。

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

// 读取cookie
const cookies = document.cookie;

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

使用File API保存文件

File API允许在浏览器中读取和保存文件。

// 保存文本文件
function saveTextAsFile(text, filename) {
  const blob = new Blob([text], {type: 'text/plain'});
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}

// 使用示例
saveTextAsFile('Hello world!', 'example.txt');

使用Web SQL Database（已废弃但部分浏览器仍支持）

Web SQL Database提供类似SQLite的数据库功能，虽然规范已废弃，但部分浏览器仍支持。

js实现保存

// 打开数据库
const db = openDatabase('myDB', '1.0', 'Test DB', 2 * 1024 * 1024);

// 执行SQL
db.transaction((tx) => {
  tx.executeSql('CREATE TABLE IF NOT EXISTS items (id unique, name)');
  tx.executeSql('INSERT INTO items (id, name) VALUES (?, ?)', [1, 'Item 1']);
});

标签: js