一.离线存储

有一个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

HTML5离线存储和本地缓存的更多相关文章

  1. 神奇的HTML5离线存储（应用程序缓存）

    声明:本文为原创文章,如需转载,请注明来源并保留原文链接前端小尚,谢谢! 前言 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. HTML5引入 ...

  2. 吓哭原生App的HTML5离线存储技术，却出乎意料的容易！【低调转载】

    吓哭原生App的HTML5离线存储技术,却出乎意料的容易![WeX5低调转载] 2015-11-16 lakb248 起步软件 近几天,WeX5小编编跟部分移动应用从业人士聊了聊,很多已经准备好全面拥 ...

  3. 【html5】html5离线存储

    html5本地存储之离线存储 1.为什么使用离线存储 ①最新的主流的浏览器中都已添加了对HTML5的offline storage功能的支持,HTML5离线存储功能非常强大, 它的作用是:在用户没有与 ...

  4. html5 离线存储

    在html页面中引入manifest文件 <html manifest="sample.appcache"> 在服务器添加mime-type text/cache-ma ...

  5. HTML5离线存储原理

    找到一篇介绍离线缓存的,感觉比之前看到的解释的更透彻,新的知识点记录如下: 大家都知道Web App是通过浏览器来访问的,所以离线状态下是无法使用app的.其中web app中的一些资源并不经常改变, ...

  6. html5 离线存储 worker

    html5 离线存储 <!DOCTYPE html> <html manifest="cache.manifest"> <!--manifest存储- ...

  7. 利用Node实现HTML5离线存储

    前言 支持离线Web应用开发是HTML5的一个重点.离线Web应用就是在设备不能上网的时候仍然可以运行的应用.开发离线Web应用需要几个步骤,其中一个就是离线下必须能访问一定的资源(图像 JS css ...

  8. AppCache 离线存储 应用程序缓存 API 及注意事项

    使用ApplicationCache接口实现离线缓存 原文:http://www.mb5u.com/HTML5/html5_96464.html 推荐:html5 application cache遇 ...

  9. html5离线存储

    为了提升Web应用的用户体验,我们在做网站或者webapp的时候,经常需要保存一些内容到本地.例如,用户登录token,或者一些不经常变动的数据. 随着HTML5的到来,出现了诸如AppCache.l ...

随机推荐

  1. cordova与ios native code交互的原理

    非常早曾经写了一篇博客,总结cordova插件怎么调用到原生代码:cordova调用过程,只是写得太水.基本没有提到原理.近期加深了一点理解,又一次补充说明一下 js调用native 以下是我们产品中 ...

  2. Android Shader 颜色、图像渲染 paint.setXfermode

    Shader Shader是一个基类,表示在绘制期间颜色的水平跨度 它的子类被嵌入在Paint中使用,调用paint.setShader(shader). 除Bitmap外的其他对象,使用该Paint ...

  3. 【Linux】Linux删除指定文件夹下面 名称不包含指定字符的文件

    例如:现在文件夹home下面有以下数据文件列表 A_20171215.DAT B_20160630.DAT C_20170823.DAT 现在想删除不包含"20160630"这个字 ...

  4. Hbase笔记1-2

    吴超1.1 Hbase是Hadoop中的数据库,Hadoop还需要数据库吗?我们学的Hadoop是一个分布式的存储和计算的平台为什么要在他上面建一个数据库呢,数据库是干什么的呢,数据库是一个管理系统( ...

  5. BAT都来参加的 DevOps Master 培训

    原文:http://www.sohu.com/a/128425731_262549 自高效运维社区开设 DevOps Master 认证培训以来,已经总共有120多人拿到证书,其中在今年春节后,有68 ...

  6. ps选框工具全解

    我们每次选择工具的时候,ps上面都会变成特定的选项,比如说下面这些: 比如说选区工具的话就分为新选区.添加选区.交叉选区之类的,这些都是需要在实战中练习的. 不单单是选区有这个工具,其他的也有这个功能 ...

  7. 更改 Nginx 服务的默认用户

    为什么要更改 Nginx 服务的默认用户:就像更改 ssh 的默认 22 端口一样,增加安全性,Nginx 服务的默认用户是 nobody ,我们更改为 nginx 1.添加 nginx 用户 use ...

  8. oracle中导出表的结构和数据

    在linux环境上: exp user_name/password@//ip_address:1521/service_name file=aa.sql tables=\(table_name\); ...

  9. PHP性能：序——谈ab（Apache Bench）压力测试工具

    PHP性能:序——谈ab(Apache Bench)压力测试工具 ab(Apache  Bench)是啥? ab是Apache自带的一个压力测试软件,可以通过ab命令和选项对某个URL进行压力测试.a ...

  10. C# 中安全代码与不安全代码

    C# 中安全代码与不安全代码 P/Invoke 非托管代码需要在unsafe块中书写. using System; using System.Collections.Generic; using Sy ...