当前位置：首页 > 行业动态 > 正文

html5有哪些不同类型的存储

HTML5存储类型包括： localStorage（持久化）、 sessionStorage（会话级）、 IndexedDB（结构化数据库）、 Cookie（带有效期）及 FileSystem API（文件操作），

HTML5 存储类型详解

Cookie

  • 用途：主要用于会话管理（如登录状态）、用户偏好设置等。
  • 特点：
    • 自动随 HTTP 请求发送到服务器。
    • 受同源策略限制，但可配置 Domain 和 Path 实现跨子域共享。
    • 每个域名下所有路径共享同一存储空间。
  • 大小限制：单个 Cookie 最大 4KB，每域名限制约 20-50 个 Cookie（浏览器依赖）。
  • 生命周期：可设置过期时间（Expires 或 Max-Age），默认为会话级（关闭浏览器清除）。
  • API：通过 document.cookie 读写,需手动解析字符串。
  • 示例： 
    // 写入 Cookie
document.cookie = "username=John; expires=Tue, 31 Dec 2024 12:00:00 UTC; path=/";
// 读取 Cookie
const cookies = document.cookie.split('; ').map(c => c.split('='));

LocalStorage

  • 用途：持久化存储大量数据（如用户设置、离线数据）。
  • 特点：
    • 数据持久化,除非手动清除或用户清理浏览器。
    • 同源策略限制,不同域名或协议隔离。
    • 仅存储字符串，需序列化复杂数据（如 JSON.stringify）。
  • 大小限制：约 5MB per 域名（浏览器依赖）。
  • API：localStorage.getItem/setItem/removeItem/clear()。
  • 示例： 
    localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme'); // 'dark'

SessionStorage

  • 用途：会话级存储,页面刷新或标签页关闭后清除。
  • 特点：
    • 与 LocalStorage API 相同,但生命周期仅限当前页面会话。
    • 适用于临时数据（如表单填写中途离开恢复）。
  • 大小限制：约 5MB per 域名（浏览器依赖）。
  • API：sessionStorage.getItem/setItem/removeItem/clear()。
  • 示例： 
    sessionStorage.setItem('draft', JSON.stringify(formData));

IndexedDB

  • 用途：存储结构化数据（如离线应用、复杂数据集合）。
  • 特点：
    • 基于事务的异步 API,支持索引和游标操作。
    • 支持二进制数据（如 ArrayBuffer、Blob）。
    • 容量上限通常为 500MB+（浏览器依赖）。
  • API：通过 indexedDB.open 创建数据库实例,使用事务读写数据。
  • 示例： 
    const db = indexedDB.open('myDB');
db.onsuccess = () => {
  const transaction = db.result.transaction('store', 'readwrite');
  transaction.objectStore('store').add({ name: 'Alice' });
};

FileSystem API（已废弃）

  • 用途：直接访问本地文件系统（早期沙盒应用）。
  • 状态：已被主流浏览器废弃，建议使用其他方案（如虚拟文件系统库）。

存储类型对比表

特性 Cookie LocalStorage SessionStorage IndexedDB
数据类型 字符串（键值对） 字符串 字符串 结构化数据（对象/数组）
大小限制 4KB/个，总量受限 ~5MB/域名 ~5MB/域名 ~500MB+/域名
生命周期 可设置过期时间 持久化 会话级 持久化
作用域 同源（可配置域） 同源 同源 同源
API 复杂度 低（字符串操作） 中等（键值对） 中等（键值对） 高（异步事务）
浏览器支持 全部 全部 全部 现代浏览器
是否需要服务器 无需（客户端存储） 无需 无需 无需

相关问题与解答

问题 1：如何选择不同的存储类型？

解答：

html5有哪些不同类型的存储 第1张

  • 短期会话数据（如未提交的表单）：SessionStorage。
  • 长期配置数据（如用户偏好、主题设置）：LocalStorage。
  • 复杂数据或大数据量（如离线应用数据库）：IndexedDB。
  • 服务器交互状态（如登录凭证）：Cookie（需注意安全标记 Secure 和 HttpOnly）。

问题 2：如何清除浏览器中的存储数据？

解答：

  • 手动清除：在浏览器设置的“隐私与安全”中清理浏览数据，勾选“缓存图像和文件”或“Cookie 及其他网站数据”。
  • 通过 JavaScript：
    • 清除所有 LocalStorage：localStorage.clear()
    • 删除单个 Cookie：`document.cookie = “cookieName=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/
0

相关文章