浅述HTML5的离线存储

离线存储是什么? 

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

离线存储的原理:

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

使用方法:

        1、创建一个和html同名的manifest文件,然后在头部加入mainfest属性

<html lang="en" manifest="index.manifest">

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

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

        CACHE:表示需要离线存储的资源列表,由于包含manifest文件的页面将被自动离线存储,所以不需要把页面自身列出来。

        NETWORK:表示它下面列出来的资源只有在在线的情况下可以访问,不会被离线存储。不过,如果在CACHE和NETWORK中有一个相同的资源,那么这个资源还是会被离线存储,因为CACHE的级别更高。

        FAILBACK:表示如果访问第一个资源失败,那么就使用第二个资源来替换它。

        3、在离线状态下,操作window.applicationCache进行离线缓存操作。

如何更新缓存:

        1、更新manifest文件

        2、通过js操作

        3、清除浏览器缓存

注意:

        1、浏览器对缓存数据的容量限制可能不一样

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

        3、引用manifest的html必须与manifest文件同源,在同一个域下

        4、FAILBACK中的资源必须与manifest文件同源

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

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

        7、当mainfest文件发生改变时,资源请求本身也会出发更新

浏览器是如何对HTML5的离线存储资源进行管理和加载?

        在线的情况下,浏览器发现html头部有manifest属性,它会请求manifest文件,如果是第一次访问页面,那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过页面并且资源已经进行离线存储了,那么浏览器就会使用离线的资源加载页面,然后浏览器就会去对比新的manifest与旧的manifest文件,如果文件没有发生改变,就不做任何操作,如果有改变,就会重新下载资源并进行离线存储。

        离线的情况下,浏览器会直接使用离线存储中的资源。

 

相关推荐

  1. HTML5线存储

    2024-04-02 07:46:01       28 阅读
  2. HTML5线存储

    2024-04-02 07:46:01       24 阅读
  3. HTML5应用程序缓存:构建线可用Web应用

    2024-04-02 07:46:01       28 阅读
  4. HTML本地线缓存?

    2024-04-02 07:46:01       39 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-02 07:46:01       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-02 07:46:01       106 阅读
  3. 在Django里面运行非项目文件

    2024-04-02 07:46:01       87 阅读
  4. Python语言-面向对象

    2024-04-02 07:46:01       96 阅读

热门阅读

  1. MongoDB聚合运算符:$lt

    2024-04-02 07:46:01       38 阅读
  2. 云计算概述报告

    2024-04-02 07:46:01       27 阅读
  3. 在课堂中使用 ChatGPT 的 80 个方式(下)

    2024-04-02 07:46:01       34 阅读
  4. 上海大学通信829考研踩坑记录

    2024-04-02 07:46:01       30 阅读
  5. Node.js常用命令

    2024-04-02 07:46:01       35 阅读
  6. R语言nc转tif

    2024-04-02 07:46:01       43 阅读
  7. Kotlin 中的构造方法

    2024-04-02 07:46:01       44 阅读