HTML5离线存储和本地缓存

2017-03-24 10:37:55

一.离线存储

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

   1.在index.html里加上<html manifest="test.manifest">

   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


  • 精彩推荐

  • 2018-08-16 16:10:43

    Laravel 跨域解决方案

    我们在用 laravel 进行开发的时候，特别是前后端完全分离的时候，由于前端项目运行在自己机器的指定端口(也可能是其他人的机器) ， 例如 localhost:8000 , 而 laravel 程序又运行在另一个端口，这样就跨域了，而由于浏览器的同源策略，跨域请求是非法的。其实这个问题很好解决，只需要添加一个中间件就可以了。

  • 2018-08-18 20:30:12

    laravel5.5 路由分割成不同文件

    routes.php/api.php文件用来放置laravel路由，当项目越来越大，相应的路由文件也会越来越多。如果能够将不同功能的路由分割到不同的文件，那么对以后的维护将很有帮助。

  • 2018-08-20 15:26:19

    关于OnTouch 和OnClick同时调用冲突的解决方案

    大家在搞轮播图的时候会碰到这样的情况，点击进入webview界面，长按轮播图停止轮播，手松开图又开始轮播，这里就涉及到了OnTouch 和OnClick同时调用。两者是有冲突的。这里简单介绍，给大家提供思路。

  • 2018-08-20 15:29:11

    揭开RecyclerView的神秘面纱(二)：处理RecyclerView的点击事件

    主要讲述了RecyclerView的基本使用方法，不同的布局管理器而造成的多样化展示方式，展示了数据之后，一般都会与用户进行交互，因此我们需要处理用户的点击事件。在ListView和GridView提供了onItemClickListener这个监听器，然而我们查找RecyclerView的API却没有类似的监听器，因此我们需要自己手动处理它的点击事件。 以下提供两种方法来实现处理RecyclerView点击事件的功能，以下代码均基于上一篇文章的代码做出修改。

  • 2018-08-20 22:58:46

    onInterceptTouchEvent和onTouchEvent调用关系详解 ...

    老实说，这两个小东东实在是太麻烦了，很不好懂，我自己那api文档都头晕，在网上找到很多资料，才知道是怎么回事，这里总结一下，记住这个原则就会很清楚了：

  • 2018-08-23 15:32:18

    map对象拷贝问题

    最后面是使用序列化的方式，发现，更改引用类型的数据的时候，mapNew对象并没有发生变化，所以产生了深拷贝。 上述的工具类，可以实现对象的深拷贝，不仅限于HashMap，前提是实现了Serlizeable接口。

  • 2018-08-24 11:33:17

    总结和分析几种判断 RecyclerView 到达底部的方法

    SwipeRefreshLayout 写一个 RecyclerView 的上下拉 ,里面有一个判断 RecyclerView 是否到达底部的方法 isBottom。我的同事用了这个上下拉之后发现有些小 bug，没考虑周全，譬如各个子项高度不统一的时候，然后我找到原因是因为这个判断上下拉的问题。所以，我就去网上查到几种判断 RecyclerView 到达底部的方法，发现各有千秋。以下的分析都以上一篇文章的 SwipeRecyclerView 为例

  • 2018-08-26 00:18:04

    RecyclerView 图片错位空白的问题

    1.图片错位的原因是因为图片异步记载返回去展示出的问题。图片空白，是item刷新，请求图片时间上的问题。 2。viewHolder.setIsRecyclable(false); 就没有tag，不设置 就有tag，但是有没有没啥区别 设置tag，

  • 2018-08-28 10:00:24

    laravel使用队列的简单步骤

    最近需要导入大量的excel文件，数量达到十万之多。 而我又不想修改服务器的超时时间，因为这样可能影响服务器的堵塞。 而php又没有很好的异步。 后来发现了令laravel最为骄傲的部分，队列。具体文档参考下方链接。