html5离线存储

最新推荐文章于 2024-07-22 22:12:16 发布

jc_kina

最新推荐文章于 2024-07-22 22:12:16 发布

阅读量435

点赞数

分类专栏： web前端文章标签： html5 存储浏览器 web应用缓存

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

什么是离线存储

它是可以让web应用程序在离线情况下继续使用，通过manifest文件指明需要缓存的资源，离线缓存就是指将不常变的资源文件保存在本地，当下次再访问页面的时候，直接读取本地被缓存的文件，使页面加载速度更快，降低了server负载。

离线存储的原理

用户通过浏览器去访问我们的web应用程序，首先会检查浏览器是否有一个叫App Cache的存在。
如果存在，就会检查到app cache里面需要缓存的资源文件，就是manifest文件指定的需要缓存文件，把这些资源从server端拉取出来，缓存在浏览器里，返回给用户。这样浏览器拿到App Cache里面缓存的这些文件。
访问App Cache的同时，它会检查server上有一个叫manifest文件，如果发现这个文件有更新，那么就会把manifest里面所指定的全部的缓存文件，重新从server断拉取一次，把它缓存在浏览器里，同时它会更新相应的App Cache这个文件，如果manifest文件没有更新的话，就什么也不做。

注意：缓存的一个资源有变化的话，它只是去更新缓存，而用户访问的时候，它是直接返回上一次的结果。

使用步骤

第一步：创建manifest文件

     CACHE MANIFEST
     #version n.n

     CACHE:
         /css/style.css
         /images/1.jpg
         /images/2.jpg
         /html/index.html
         /js/index.js

     NETWORK:
         *(除了CACHE文件，其他文件都是从server端拉取)

     FALLBACK:
         /offlines.html

第二步：在html页面中引用manifest文件

<html manifest="manifest.appcache">

<html lang="en" manifest="manifest.appcache">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css/style.css">
<title>appcache应用</title>
</head>
<body>
<h1>APP Cache Dmeo1</h1>
<ul>
    <li><img src="images/1.jpg"></li>
    <li><img src="images/2.jpg"></li>
</ul>
<script type="text/javascript">
window.addEventListener('load',function(e) {
    window.applicationCache.addEventListener('updateready',function(e) {
        console.log(window.applicationCache.status);
        if (window.applicationCache.status == window.applicationCache.UPDATEREADY ){ //如果manifest有更新,把app cache重置
            window.applicationCache.swapCache();
            if (confirm('A new version of this site is available. load it?')) {
                window.loaction.reload();
            }else{
            console.log('manifest didn\'t change');
           }
       }            
    },false);
},false);
</script>
</body>

第三步：在服务器的mime-types文件添加text-manifest

在apache/config/mime-types添加text/cache-manifest appache
第四步：如何更新

修改了某个资源文件，必须通过修改manifest文件来刷新被缓存的文件。
第五步：不使用这个缓存机制，可以将manifest文件修改为其他文件名

比如将前面的manifest.appcache改名为manifest1.appcache，第二次刷新的时候，所有资源文件开始走网络。

优点

完全离线，在没有网络的情况下也可以继续访问web应用。
资源被本地缓存，加载更快，降低server负载。

缺点

缺点1：如果业务里某个资源更新了，就必须修改manifest文件，应用才会认为是被修改的，更改完以后，第一次是不生效的。因为如果有缓存，它直接返回缓存里的内容，只有第二次刷新的时候，才能看到更新之后的内容。
缺点2：就是有一个文件更新的话，你需要修改manifest文件，如果发现manifest有更新，他是会把所有列在里面的缓存文件全部从server端拉取一次，而不仅仅是拉取修改的那个文件，这是一个耗费。
含有mainifest属性的当前请求页无论如何都会被缓存。
对于链接的参数变化是敏感，任何一个参数的修改都会被（master）重新缓存（重复缓存含参页面）index.html和index.html?aa=1会被认为是不同的文件，分别缓存

转载：—— http://www.imooc.com/view/104

jc_kina

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
html5离线存储

html5离线存储什么是离线存储它是可以让web应用程序在离线情况下继续使用，通过manifest文件指明需要缓存的资源，离线缓存就是指将不常变的资源文件保存在本地，当下次再访问页面的时候，直接读取本地被缓存的文件，使页面加载速度更快，降低了server负载。离线存储的原理用户通过浏览器去访问我们的web应用程序，首先会检查浏览器是否有一个叫App Cache的存在。
复制链接

扫一扫