网页也能存数据、能离线吗

很多人以为网页必须联网、刷新就丢光。其实现代浏览器给了前端一整套本地存储能力：小到记住用户的主题偏好，大到离线缓存整份待办数据、弱网下先渲染界面再慢慢同步。用得好，网页在地铁里没信号时也能打开、能操作，联网后再把数据同步上去。

这篇把前端存储的几兄弟按用途理清楚，并讲怎么用 IndexedDB 存数据、用 Cache API 加 Service Worker 让页面离线可用。

本文核心知识点
  • 存储选型Cookie/LocalStorage/IndexedDB 各有边界。
  • IndexedDB浏览器里的大容量异步数据库。
  • Cache API缓存请求与响应，配合离线。
  • Service Worker拦截网络请求，实现离线兜底。
Web 存储离线配图：蓝色渐变背景一个浏览器窗口轮廓，旁边连着数据库圆柱与缓存方块，右侧一面带对勾的盾牌表示离线可用，扁平科技插画
浏览器连数据库与缓存方块，盾牌表示离线可用，正是本地存储加离线能力的意象。

几种存储该怎么选

浏览器里的本地存储各有分工：Cookie很小、每次请求都带在头上，主要用来做登录态，不适合存业务数据；LocalStorage是同步的键值对，适合存几 KB 的小偏好，但存大了会卡主线程、也不能存结构化数据；IndexedDB是浏览器内置的异步数据库，容量大、能存对象和索引，适合大量结构化数据。一句话：小偏好用 LocalStorage，真要存数据就上 IndexedDB。

LocalStorage：最简单的键值存储

LocalStorage 用法最直接，读写都是同步的，关掉页面数据还在。适合记住主题、折叠状态这类小开关。注意它只能存字符串，存对象要自己 JSON 序列化；而且同步读写，别往里塞大东西。

localStorage.setItem('theme', 'deepblue');
const t = localStorage.getItem('theme');
localStorage.removeItem('theme');

IndexedDB：存大量结构化数据

IndexedDB 是前端的"真数据库"：异步、容量大、支持对象存储和索引。原生 API 偏底层，可以用 idb 这类小库包一层。核心概念：打开数据库、建对象仓库（类似表）、用增删改查事务操作。离线待办、离线缓存的聊天记录都适合放这。

import { openDB } from 'idb';
const db = await openDB('myapp', 1, {
  upgrade(d) { d.createObjectStore('todos', { keyPath: 'id' }); }
});
await db.put('todos', { id: 1, text: '离线写一条' });
const row = await db.get('todos', 1);