html5有几种存储类型

HTML5存储类型详解

本地存储（localStorage）

• 特点：
  • 数据持久化，关闭浏览器后仍保留。
  • 所有同源页面共享数据。
  • 仅支持字符串存储，需手动序列化/反序列化对象。
  • 容量限制约5MB（浏览器依赖）。
• 适用场景：
  长期配置信息（如用户偏好设置）、跨页面传递非敏感数据。
• API示例：

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

会话存储（sessionStorage）

• 特点：
  • 数据仅在当前页面会话中存活（标签页关闭或刷新后清除）。
  • 同源但不同标签页数据隔离。
  • 容量限制与localStorage一致。
• 适用场景：
  临时数据存储（如表单填写中途离开页面）。
• API示例：

  sessionStorage.setItem('tempKey', 'tempValue');
  const tempValue = sessionStorage.getItem('tempKey');

IndexedDB

• 特点：
  • 轻量级关系型数据库，支持事务、索引、二进制数据。
  • 容量大（通常数百MB至数GB，依赖浏览器）。
  • 异步API，需使用promise或callback处理结果。
• 适用场景：
  复杂数据结构存储（如离线应用、大量记录管理）。
• API示例：

  const db = new Dexie('myDatabase'); // 使用Dexie库简化操作
  db.version(1).stores({ friends: '++id,name,age' }); // 定义表结构
  db.friends.add({ name: 'Alice', age: 25 }); // 插入数据

Cookies（非HTML5新增，但常用于存储）

• 特点：
  • 每次HTTP请求自动携带，支持设置过期时间、路径、域名。
  • 容量极小（约4KB），仅支持字符串。
  • 主要用于服务器与客户端状态同步。
• 适用场景：
  登录态维护、服务器端会话跟踪。
• API示例：

  document.cookie = 'username=John; max-age=3600'; // 设置Cookie
  const cookies = document.cookie.split(';'); // 读取所有Cookie

FileSystem API（实验性）

• 特点：
  • 允许网页直接读写用户本地文件系统（需用户授权）。
  • 分为window.webkitRequestFileSystem（Chrome）和navigator.storage（Firefox）。
• 适用场景：
  文件上传预览、离线文件编辑（已逐渐被更标准的API取代）。

存储类型对比表

相关问题与解答

问题1：如何选择合适的存储类型？

• 解答：
  • 小量临时数据：sessionStorage（如表单临时保存）。
  • 小量持久数据：localStorage（如用户偏好设置）。
  • 大量或复杂数据：IndexedDB（如离线应用数据库）。
  • 服务器交互：Cookies（如登录状态维护）。
  • 文件操作：FileSystem API（谨慎使用，需用户授权）。

问题2：HTML5存储数据是否安全？

• 解答：
  • 不安全：所有客户端存储均暴露于JavaScript环境，易受XSS攻击。
  • 敏感数据需加密：存储前应通过CryptoJS等库加密，避免明文存储密码、密钥等。
  • HttpOnly Cookie：若需通过Cookie传输敏感信息，建议设置HttpOnly