• 10. HTML5 的离线储存怎么使用, 它的工作原理是什么?


    10. HTML5 的离线储存怎么使用, 它的工作原理是什么?

    定义

    离线存储是指在用户没有与因特网连接时, 可以正常访问站点或应用, 在用户与因特网连接时, 更新用户机器上的缓存文件。

    原理

    HTML5 的离线存储是基于一个新建的 .appcache 文件的缓存机制(不是存储技术), 通过这个文件上的解析清单离线存储资源, 这些资源就会像 cookie 一样被存储了下来。之后当网络在处于离线状态下时, 浏览器会通过被离线存储的数据进行页面展示。

    使用方法

    • 创建一个和 html 同名的 manifest 文件, 然后在页面头部加入 manifest 属性
    <html lang="en" manifest="index.manifest">
    
    • 1
    • cache.manifest 文件中编写需要离线存储的资源
      • CACHE: 表示需要离线存储的资源列表, 由于包含 manifest 文件的页面将被自动离线存储, 所以不需要把页面自身也列出来
      • NETWORK: 表示在它下面列出来的资源只有在在线的情况下才能访问, 他们不会被离线存储, 所以在离线情况下无法使用这些资源。不过, 如果在 CACHENETWORK 中有一个相同的资源, 那么这个资源还是会被离线存储, 也就是说 CACHE 的优先级更高
      • FALLBACK: 表示如果访问第一个资源失败, 那么就使用第二个资源来替换他, 比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了, 那么就去访问 offline.html
    CACHE MANIFEST
        #v0.11
        CACHE:
        js/app.js
        css/style.css
        NETWORK:
        resourse/logo.png
        FALLBACK:
        / /offline.html
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 在离线状态时, 操作 window.applicationCache 进行离线缓存的操作

    如何更新缓存

    • 更新 manifest 文件
    • 通过 javascript 操作
    • 清除浏览器缓存

    注意事项

    • 浏览器对缓存数据的容量限制可能不太一样(某些浏览器设置的限制是每个站点 5MB)
    • 如果 manifest 文件, 或者内部列举的某一个文件不能正常下载, 整个更新过程都将失败, 浏览器继续全部使用老的缓存
    • 引用 manifesthtml 必须与 manifest 文件同源, 在同一个域下
    • FALLBACK 中的资源必须和 manifest 文件同源
    • 当一个资源被缓存后, 该浏览器直接请求这个绝对路径也会访问缓存中的资源
    • 站点中的其他页面即使没有设置 manifest 属性, 请求的资源如果在缓存中也从缓存中访问
    • manifest 文件发生改变时, 资源请求本身也会触发更新
  • 相关阅读:
    高等数学_不等式合集
    六要素微气象仪
    操作系统存储器章节知识梳理
    【牛客网-前端笔试题】——Javascript专项练习5
    Vue3 - 生命周期钩子函数(组合式 API)
    IO进程及相关函数
    弄懂Rust编程中的Trait
    leetcode31. 下一个排列python_双指针(思想太美妙)
    5种典型 API 攻击及预防建议
    Go 常量为什么只支持基本数据类型?
  • 原文地址:https://blog.csdn.net/m0_51180924/article/details/126718364