html5本地api

HTML5 本地存储 API

LocalStorage

• 用途：长期存储数据，数据持久化，关闭浏览器后仍保留。
• 特点：
  • 以键值对形式存储字符串。
  • 同一域名下所有页面共享数据。
  • 容量约 5~10MB（浏览器依赖）。
• 常用方法：

  // 存储数据
  localStorage.setItem('key', 'value');
  // 读取数据
  const value = localStorage.getItem('key');
  // 删除单个键值
  localStorage.removeItem('key');
  // 清空所有数据
  localStorage.clear();

SessionStorage

• 用途：短期存储数据，页面会话结束后清除（如标签页关闭）。
• 特点：
  • 仅当前页面（标签页）可见，其他页面不可访问。
  • 容量与 LocalStorage 类似。
• 常用方法：与 LocalStorage 完全一致，仅作用域不同。

IndexedDB

• 用途：结构化数据存储，支持复杂查询和大数据量（可达数百MB）。

• 特点：

  • 异步 API，基于事务操作。
  • 支持索引、主键、游标等数据库特性。

• 基本操作：

  // 打开数据库
  const db = indexedDB.open('dbName');
  db.onsuccess = (event) => {
    const db = event.target.result;
    // 创建事务
    const transaction = db.transaction(['objectStoreName'], 'readwrite');
    // 操作对象仓库
    const store = transaction.objectStore('objectStoreName');
    store.add({ key: 'value' }); // 添加数据
  };

File API

• 用途：处理本地文件（读取、写入、切片等）。
• 核心功能：
  • FileReader：读取文件内容（文本、二进制、DataURL）。
  • Blob：生成二进制数据对象。
• 示例：

  // 读取文件
  const fileInput = document.querySelector('input[type="file"]');
  fileInput.onchange = (event) => {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.onload = () => console.log(reader.result); // 文件内容
    reader.readAsText(file);
  };

本地存储 API 对比表

相关问题与解答

问题 1：如何选择 LocalStorage、SessionStorage 或 IndexedDB？

• 解答：
  • 简单键值对且需长期保存：选 LocalStorage（如用户偏好设置）。
  • 临时数据且仅当前页面使用：选 SessionStorage（如表单临时草稿）。
  • 复杂数据结构或大容量存储：选 IndexedDB（如离线应用数据库）。

问题 2：IndexedDB 操作为何需要异步处理？

• 解答：
  IndexedDB 设计为异步 API，避免阻塞主线程，其操作（如增删改查）依赖事务和事件回调（onsuccess/onerror），确保高性能和响应式体验，尤其适合处理大量