HTML5离线存储和本地缓存

柔情只为你懂 2022-06-18 09:24 236阅读 0赞

一.离线存储

有一个web应用有三个文件index.html,a.js,b.css，现在需要把js和css文件缓存起来

1.在index.html里加上

2.manifest清单格式如下

CACHE MANIFEST
    #上面一句必须
    #v1.0.0
    #需要缓存的文件
    CACHE:
    a.js
    b.css
    #不需要缓存的文件
    NETWORK:
    *
    #无法访问页面
    FALLBACK:
    404.html

3.manifest文件的mime-type必须是 text/cache-manifest类型

注意点：

1.对于每个index.html?id=1或index.html?id=2都会分别缓存index.html页面，可以通过chrome浏览器Resources/Application Cache观察

2.如果想更新缓存内容，只要修改下manifest文件即可，如改版本号v1.0.1

4.离线存储如果资源有更新，可以通过如下代码来监听，但第一次加载还会是原来的版本

window.applicationCache.addEventListener('updateready',function(e){
        if(window.applicationCache.status == window.applicationCache.UPDATEREADY){
            window.applicationCache.swapCache();
    
            if(confirm("loding new?")){
                window.location.reload()
            }
        }
    },false)

二.本地缓存

localStorage.setItem("key","value")
    
    localStorage.getItem("key","value")
    
    localStorage.removeItem("key")
    
    localStorage.clear()

1.本地存储永不过期，除非自己去清除

2.可以通过chrome浏览器Resources/Local Storage来查看
    
    3.不同域下就算key相同取不到的值也不同，如localhost和127.0.0.1

发表评论取消回复

表情：

评论列表（有 0 条评论，236人围观）

还没有评论，来说两句吧...

相关阅读

相关 html5 app 离线缓存文件,html5离线缓存缓存所有文件，而不是缓存中列出的文件

我正在尝试使用HTML5的离线缓存。但问题是缓存所有的html文件，而不是我在缓存清单文件中提到的那些文件：例如：我有4个html文件：index.html，test.ht

た入场券/ 2022年10月06日 10:47/ 0 赞/ 145 阅读

相关 html5的离线存储问题汇总

HTML5的一个重要特性就是离线存储，所谓的离线存储就是将一些资源文件保存在本地，这样后续的页面重新加载将使用本地资源文件，在离线情况下可以继续访问web应用，同

迈不过友情╰/ 2022年08月24日 11:44/ 0 赞/ 177 阅读

相关有趣的HTML5：离线存储

随着Web App的发展，越来越多的移动端App使用HTML5的方式来开发，除了一些HybridApp以外，其他一部分Web App还是通过浏览器来访问的，通过浏览器访问就需要

小灰灰/ 2022年08月20日 09:24/ 0 赞/ 238 阅读

相关 html5的页面缓存和本地数据存储支持

1. html5的页面缓存 http://www.cnblogs.com/xqhppt/p/4157862.html http://blog.sina.com.cn/s/b

清疚/ 2022年08月19日 11:24/ 0 赞/ 154 阅读

相关 html5本地存储

html5本地存储通过 localStorage /sessionStorage 对数据的简单存储效果图： ![Center][] 1. l

蔚落/ 2022年08月19日 11:09/ 0 赞/ 208 阅读

相关 HTML5之---Manifest 文件--离线缓存

完整的 Manifest 文件 CACHE MANIFEST 2012-02-21 v1.0.0 /theme.css /logo.gi

朴灿烈づ我的快乐病毒、/ 2022年08月19日 08:38/ 0 赞/ 166 阅读

相关 HTML5离线存储原理及实现

前言 > 使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。 > > HTML5引入了应用程序缓存，这意味着 we

骑猪看日落/ 2022年07月14日 03:55/ 0 赞/ 180 阅读

相关 HTML5离线存储和本地缓存

一.离线存储有一个web应用有三个文件index.html,a.js,b.css，现在需要把js和css文件缓存起来 1.在index.html里加上 2.manife

柔情只为你懂/ 2022年06月18日 09:24/ 0 赞/ 237 阅读

相关 HTML5离线缓存

一,离线缓存文档的本地缓存,在断网的情况下依旧能够访问, 但是不能访问网络接口 1,检测支持性 if(window.a

r囧r小猫/ 2021年09月17日 01:18/ 0 赞/ 430 阅读

相关 HTML5本地存储

本地存储 localStoage sessionStorage 1,兼容性火狐3.6谷歌5.0 safari4 0pera10

电玩女神/ 2021年09月17日 01:16/ 0 赞/ 400 阅读