前端面试：HTML5 的前端离线储存的使用和原理？

作者：NativeBase 2023-05-29 10:38:00开发 前端 HTML5 的离线存储是基于一个新建的 Appcache 文件的缓存机制（不是存储技术），通过这个文件上的面试解析清单离线存储资源，这些资源就会像 cookie 一样被存储了下来。线储

相似存储

localStorage 长期存储数据，使用浏览器关闭后数据不丢失； sessionStorage 数据在浏览器关闭后自动删除。和原

离线的前端存储：

service-worker 的标准。

在用户没有与因特网连接时，面试可以正常访问站点或应用，线储在用户与因特网连接时，使用更新用户机器上的和原缓存文件。

原理：

HTML5 的前端离线存储是基于一个新建的 appcache 文件的缓存机制（不是存储技术），通过这个文件上的面试解析清单离线存储资源，这些资源就会像 cookie 一样被存储了下来。线储

之后当网络在处于离线状态下时，使用浏览器会通过被离线存储的和原数据进行页面展示。如何使用。

1、页面头部像下面一样加入一个 manifest 的属性。

2、在 cache.manifest 文件的编写离线存储的资源。

CACHE MANIFEST #v0.11CACHE:js/app.js css/style.css NETWORK:resourse/logo.png FALLBACK:/ /offline.html

• CACHE: 表示需要离线存储的资源列表，由于包含 manifest 文件的页面将被自动离线存储，所以不需要把页面自身也列出来。
• NETWORK: 表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在 CACHE 和 NETWORK 中有一个相同的资源，那么这个资源还是会被离线存储，也就是说 CACHE 的优先级更高。
• FALLBACK: 表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问 offline.html 。

3、在离线状态时，操作 window.applicationCache 进行需求实现。

service-worker

如何更新缓存：

（1）更新 manifest 文件。

（2）通过 javascript 操作。

（3）清除浏览器缓存。

注意事项：

（1）浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。

（2）如果 manifest 文件，或者内部列举的某一个文件不能正常下载，整个更新过程都将失败，浏览器继续全部使用老的缓存。

（3）引用 manifest 的 html 必须与 manifest 文件同源，在同一个域下。

（4）FALLBACK 中的资源必须和 manifest 文件同源。

（5）当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。

（6）站点中的其他页面即使没有设置 manifest 属性，请求的资源如果在缓存中也从缓存中访问。

（7）当 manifest 文件发生改变时，资源请求本身也会触发更新。

责任编辑：姜华 来源： 今日头条 HTML5离线存储

(责任编辑：探索)