HTML5离线存储和本地缓存
一.离线存储
有一个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离线存储和本地缓存的更多相关文章
- 神奇的HTML5离线存储(应用程序缓存)
声明:本文为原创文章,如需转载,请注明来源并保留原文链接前端小尚,谢谢! 前言 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. HTML5引入 ...
- 吓哭原生App的HTML5离线存储技术,却出乎意料的容易!【低调转载】
吓哭原生App的HTML5离线存储技术,却出乎意料的容易![WeX5低调转载] 2015-11-16 lakb248 起步软件 近几天,WeX5小编编跟部分移动应用从业人士聊了聊,很多已经准备好全面拥 ...
- 【html5】html5离线存储
html5本地存储之离线存储 1.为什么使用离线存储 ①最新的主流的浏览器中都已添加了对HTML5的offline storage功能的支持,HTML5离线存储功能非常强大, 它的作用是:在用户没有与 ...
- html5 离线存储
在html页面中引入manifest文件 <html manifest="sample.appcache"> 在服务器添加mime-type text/cache-ma ...
- HTML5离线存储原理
找到一篇介绍离线缓存的,感觉比之前看到的解释的更透彻,新的知识点记录如下: 大家都知道Web App是通过浏览器来访问的,所以离线状态下是无法使用app的.其中web app中的一些资源并不经常改变, ...
- html5 离线存储 worker
html5 离线存储 <!DOCTYPE html> <html manifest="cache.manifest"> <!--manifest存储- ...
- 利用Node实现HTML5离线存储
前言 支持离线Web应用开发是HTML5的一个重点.离线Web应用就是在设备不能上网的时候仍然可以运行的应用.开发离线Web应用需要几个步骤,其中一个就是离线下必须能访问一定的资源(图像 JS css ...
- AppCache 离线存储 应用程序缓存 API 及注意事项
使用ApplicationCache接口实现离线缓存 原文:http://www.mb5u.com/HTML5/html5_96464.html 推荐:html5 application cache遇 ...
- html5离线存储
为了提升Web应用的用户体验,我们在做网站或者webapp的时候,经常需要保存一些内容到本地.例如,用户登录token,或者一些不经常变动的数据. 随着HTML5的到来,出现了诸如AppCache.l ...
随机推荐
- ubuntu+let's encrypt生成永久免费https证书 ubuntu+tomcat+nginx+let's encrypt
1. 下载let's encrypt $ sudo add-apt-repository ppa:certbot/certbot $ sudo apt-get update $ sudo apt-ge ...
- 阿里巴巴 DevOps 转型后的运维平台建设
原文:http://www.sohu.com/a/156724220_262549 本文转载自公众号「DevOps 时代」,高效运维社区致力于陪伴您的职业生涯,与您一起愉快的成长. 作者简介: 陈喻( ...
- struct和class的不同以及struct的应用场景
struct在C#中被用来定义结构,它是一种比类小的数据类型.和类一样都是创建对象的模板,可以有自己的数据以及处理和访问数据的方法. struct的用法: struct FurnitureSize { ...
- E - Hangover(1.4.1)
Time Limit:1000MS Memory Limit:10000KB 64bit IO Format:%I64d & %I64u Submit cid=1006#sta ...
- 42:换汽水瓶ExchangeBottle
有这样一道智力题:“某商店规定:三个空汽水瓶可以换一瓶汽水.小张手上有十个空汽水瓶,她最多可以换多少瓶汽水喝?”答案是5瓶,方法如下:先用9个空瓶子换3瓶汽水,喝掉3瓶满的,喝完以后4个空瓶子,用3个 ...
- SVN服务端的安装搭建(Linux)
在CentOS下安装 SVN 大多数 GNU/Linux 发行版系统自带了Subversion ,所以它很有可能已经安装在你的系统上了.可以使用下面命令检查是否安装了. svn --version 如 ...
- 【Hadoop基础教程】2、Hadoop之单机模式搭建(转)
单机模式所需要的系统资源是最少的,这种安装模式下,Hadoop的core-site.xml.mapred-site.xml.hdfs-site.xml配置文件均为空.默认情况下,官方hadoop-1. ...
- Verilog 浮点数运算模块
算法中常常会到浮点数运算,而浮点数的处理常常是Verilog初学中常常遇到的问题.以下将就一个简单的例子说明Verilog中浮点数运算处理. 在JPEG图像压缩时遇到色彩空间变换的问题,将YCbCr转 ...
- java 实现HttpRequest 发送http请求
package com.test; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStr ...
- 请描述Java中的时间监听机制?
1.时间监听涉及到三个组件:事件源.事件对象.事件监听器 2.当事件源上发生某个动作时,它会调用事件监听器的一个方法,并将事件对象穿进去,开发人员在监听器中通过事件对象,拿到事件源,从而对事件源进行操 ...