JavaScript本地存储详解与API使用指南

有志者，事竟成！如果你在学习文章，那么本文《JavaScript本地存储方法及浏览器API详解》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

JavaScript本地存储主要用Web Storage（localStorage永久、sessionStorage临时）和IndexedDB（高容量结构化数据库），辅以Cookies、Cache API等；选择依数据量、生命周期和功能需求而定。

JavaScript 实现本地存储主要依靠浏览器提供的 Web Storage API 和 IndexedDB API，它们允许网页在用户设备上持久或临时保存数据，无需依赖服务器。

Web Storage（localStorage 和 sessionStorage）

这是最常用、最简单的本地存储方式，以键值对（字符串）形式保存数据。

• localStorage：数据永久保存，除非手动清除（如调用 localStorage.clear() 或用户删除浏览器数据），关闭标签页或重启浏览器也不丢失。
• sessionStorage：仅在当前浏览器标签页生命周期内有效，关闭该标签页即自动清空，适合临时会话数据（如表单草稿、导航状态）。

两者都只能存字符串，若需存对象或数组，需配合 JSON.stringify() 和 JSON.parse()：

localStorage.setItem('user', JSON.stringify({ name: '张三', age: 28 }));
const user = JSON.parse(localStorage.getItem('user'));

IndexedDB（结构化、高容量本地数据库）

IndexedDB 是一个低级、异步、事务型的客户端数据库，适合存储大量结构化数据（如文件、图片 Blob、复杂对象），支持索引、查询和游标遍历。

• 容量远大于 localStorage（通常可达数百 MB，具体取决于浏览器和磁盘空间）。
• 所有操作基于请求对象（IDBRequest），通过事件（onsuccess / onerror）或 Promise 包装（如使用 idb 库）处理结果。
• 需要先打开数据库、创建 objectStore（类似表）、再增删改查。

原生使用较繁琐，推荐搭配轻量封装库如 idb 简化操作：

import { openDB } from 'idb';
const db = await openDB('myapp', 1, {
  upgrade(db) {
    db.createObjectStore('notes', { keyPath: 'id' });
  }
});
await db.put('notes', { id: 1, content: '今天要开会' });

其他补充 API（按场景选用）

Cookies：可通过 document.cookie 读写，但容量小（约 4KB）、每次 HTTP 请求自动携带，已不推荐用于纯前端存储；适合身份凭证等需服务端参与的场景。

Cache API：配合 Service Worker 使用，主要用于离线资源缓存（HTML/CSS/JS/图片等），不是通用数据存储接口。

File System Access API（实验性）：允许网页直接读写用户本地文件系统（需用户主动授权），适用于编辑器、音视频工具等重型 PWA 应用，目前仅 Chromium 系浏览器支持且默认受限。

兼容性与选择建议

localStorage/sessionStorage 兼容所有现代浏览器（包括 IE8+）；IndexedDB 在 Chrome/Firefox/Safari/Edge 均有良好支持（Safari 从 iOS 14.4+ 开始稳定支持）。

• 存少量配置、用户偏好 → 用 localStorage
• 存单页内临时状态 → 用 sessionStorage
• 需存大量数据、支持搜索/索引/离线同步 → 选 IndexedDB
• 需跨域共享或服务端校验 → 考虑 Cookie + 后端配合

理论要掌握，实操不能落！以上关于《JavaScript本地存储详解与API使用指南》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！