当前位置：首页 > JavaScript

js实现网页保存

2026-04-04 03:12:36JavaScript

使用 localStorage 保存数据

localStorage 允许在浏览器中存储键值对数据，数据不会随页面关闭而清除。

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

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

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

使用 sessionStorage 保存会话数据

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

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

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

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

IndexedDB 是一个底层 API，适合存储大量结构化数据。

const request = indexedDB.open('MyDatabase', 1);

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

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

  store.add({ id: 1, name: 'Item 1' });
};

使用 Cookies 保存小量数据

Cookies 适合存储小量数据，会在每次 HTTP 请求中发送到服务器。

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

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

实现文件下载保存

通过创建 Blob 对象和下载链接实现文件保存功能。

function saveFile(content, filename, type) {
  const blob = new Blob([content], { type });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');

  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

// 使用示例
saveFile('Hello World', 'example.txt', 'text/plain');

使用 File System Access API

现代浏览器支持的 API，允许网页直接与用户本地文件系统交互。

js实现网页保存

async function saveFile() {
  try {
    const handle = await window.showSaveFilePicker({
      types: [{
        description: 'Text Files',
        accept: { 'text/plain': ['.txt'] }
      }]
    });

    const writable = await handle.createWritable();
    await writable.write('File content');
    await writable.close();
  } catch (err) {
    console.error(err);
  }
}