JavaScript提供多种浏览器数据存储API:localStorage/sessionStorage用于字符串键值对,IndexedDB适合结构化大数据,Cache API专用于Service Worker缓存网络资源,cookie仅适用于小量凭证数据,Web SQL已废弃。

在浏览器中储存数据,JavaScript 提供了几个原生 API,适用于不同场景:需要简单键值对就用 localStorage 或 sessionStorage;要存结构化、大量或带索引的数据,就用 IndexedDB;临时缓存资源可配合 Cache API(常与 Service Worker 一起用)。
localStorage 和 sessionStorage
两者都提供简单的字符串键值对存储,API 相同,区别在于生命周期:
- localStorage:数据永久保存,除非手动清除(关闭标签页也不丢失)
- sessionStorage:仅在当前浏览器标签页有效,关闭即清空
基本用法:
localStorage.setItem('username', 'Alice');
const name = localStorage.getItem('username');
localStorage.removeItem('username');
⚠ 注意:只能存字符串。对象需先 JSON.stringify(),读取时再 JSON.parse()。
立即学习“Java免费学习笔记(深入)”;
IndexedDB:浏览器的“本地数据库”
适合存大量结构化数据(如离线消息、用户文档、图片 blob),支持事务、索引、查询,但 API 较底层、异步。
- 用
window.indexedDB.open()打开或创建数据库 - 通过
objectStore存取数据,类似表;可用index加速按非主键字段查询 - 所有操作基于请求对象(
IDBRequest),靠事件回调(onsuccess/onerror)处理结果
例子:添加一条用户记录
本文档主要讲述的是Android 本地数据存储;对于需要跨应用程序执行期间或生命期而维护重要信息的应用程序来说,能够在移动设备上本地存储数据是一种非常关键的功能。作为一名开发人员,您经常需要存储诸如用户首选项或应用程序配置之类的信息。您还必须根据一些特征(比如访问可见性)决定是否需要涉及内部或外部存储器,或者是否需要处理更复杂的、结构化的数据类型。跟随本文学习 Android 数据存储 API,具体来讲就是首选项、SQLite 和内部及外部内存 API。希望本文档会给有需要的朋友带来帮助;感兴趣的朋友可以
const request = indexedDB.open('myApp', 1);
request.onupgradeneeded = e => {
const db = e.target.result;
if (!db.objectStoreNames.contains('users')) {
db.createObjectStore('users', { keyPath: 'id' });
}
};
request.onsuccess = e => {
const db = e.target.result;
const tx = db.transaction('users', 'readwrite');
const store = tx.objectStore('users');
store.add({ id: 1, name: 'Bob' });
};
Cache API:专为网络资源缓存设计
不是通用数据存储,而是配合 Service Worker 缓存 HTTP 请求/响应(如 HTML、CSS、图片),实现离线访问或加速加载。
- 需在 Service Worker 环境中使用(不能直接在页面脚本调用)
- 通过
caches.open('cache-name')获取缓存实例 - 用
put()、match()、delete()管理缓存项
示例:缓存一个首页请求
// 在 service-worker.js 中
self.addEventListener('install', e => {
e.waitUntil(
caches.open('v1').then(cache =>
cache.add('/')
)
);
});
其他轻量选项(补充)
cookie:可通过 document.cookie 读写,但容量小(约 4KB)、每次请求自动发送、安全性与过期控制较复杂,现在一般只用于身份凭证等必要场景。
Web SQL(已废弃):曾是 SQLite 接口,但未被标准采纳,现代浏览器已停止支持,不建议新项目使用。
不复杂但容易忽略:所有这些 API 都受同源策略限制,且只有在安全上下文(https:// 或 localhost)下才能使用部分功能(如 localStorage 在某些 http 环境可能受限)。









