离线缓存和本地存储不是一回事
很多人在做网页或App开发时，常把“离线缓存”和“本地存储”混为一谈。其实它们解决的问题不一样，技术实现也完全不同。比如你用手机看新闻App，断网后还能看到上次打开的文章，这可能是本地存储的功劳；而你刷短视频，哪怕没网也能继续滑动加载之前的内容，那更可能是离线缓存的作用。
本地存储：存的是用户数据
本地存储的核心是保存用户自己的信息，比如登录状态、设置偏好、表单内容等。最常见的技术是 localStorage 和 sessionStorage。它们就像你手机里的备忘录，关机也不丢（localStorage），或者只在当前会话有效（sessionStorage）。
举个例子，你在电商网站设置了“按价格排序”，刷新页面后这个设置还在，就是因为它被写进了 localStorage：
localStorage.setItem('sortOrder', 'price_asc');
let order = localStorage.getItem('sortOrder');这类数据一般不大，通常限制在5-10MB之间，适合长期保留的小块信息。
离线缓存：存的是页面和资源
离线缓存的目标是让整个网页或应用在没有网络时也能运行。它更像是把网站“打包”一部分下载到本地，包括HTML、CSS、JS、图片等静态资源。关键技术有 Service Worker 搭配 Cache API，还有老一点的 AppCache（现已淘汰）。
比如你常用的待办事项网页应用，即使地铁进隧道断了网，依然能添加新任务、查看旧列表，这就是因为Service Worker提前缓存了核心文件，并在离线时接管请求：
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});这种机制支撑的是PWA（渐进式网页应用），体验接近原生App。
关键区别在哪？
作用对象不同：本地存储针对用户数据，离线缓存针对程序资源。
使用场景不同：你填了一半的问卷不想丢，用本地存储；你想让网页像App一样随时可用，就得靠离线缓存。
控制粒度也不同：localStorage 是键值对，操作简单；Cache API 可以缓存HTTP请求响应流，更灵活但也更复杂。
还有个明显差别——更新策略。本地存储的数据除非手动清除，否则一直留着；而缓存资源需要版本管理，不然用户永远看不到新界面。常见的做法是在Service Worker里检查版本号，触发重新缓存。
实际项目中怎么选？
多数现代Web应用其实是两者都用。比如一个记账小程序：登录凭证和账户设置存在 localStorage；首页的框架HTML、CSS、JS通过Service Worker缓存，确保秒开和离线可用。
如果你只是想记住用户偏好，别折腾Service Worker；但如果你想打造“断网也不卡”的体验，光靠本地存储远远不够。搞清楚各自定位，才能合理搭配使用。