HTML5的离线储存

最新推荐文章于 2023-06-05 16:00:56 发布

琳木兮

最新推荐文章于 2023-06-05 16:00:56 发布

阅读量741

点赞数

文章标签： javascript html html5

本文链接：https://blog.csdn.net/jililin123/article/details/109543852

版权

HTML5的离线储存怎么使用，工作原理能不能解释一下？

一、原理

HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示

二、使用步骤

1.1.首先我们需要在我们的文件目录中新建一个manifest文件“test.manifest”

（示例）：

在这里插入图片描述

2.这是一个简单的manifest文件。文件内开始的时候需要“CACHE MANIFEST”是声明这是一个manifest文件。“CACHE:”是操作类型，指我们需要通过它进行前期加载并缓存下来的文件。ps：

代码如下（示例）：

CACHE MANIFEST
#test.manifest本文件名字的注释
CACHE:
js/jquery-2.1.4.min.js
js/zepto.js
js/common.js
js/jquery.SuperSlide.2.1.1.js
css/reset.css
css/style.css
css/swiper-3.2.7.min.css
images/2yuan.png
images/10yuan.png
images/30yuan.png
images/50yuan.png
images/100yuan.png
images/300yuan.png
images/bomb.png
images/btn_01.png
images/decorate_M.png
images/explain_btn.png
images/explain_wrap_bg.png
images/font_01.png
images/font_02.png
images/font_03.png
images/font_04.png
images/footer_bg.png
images/fuse.png
images/index_bg.jpg
images/logo.png
images/notice_bg.png
images/on_font_02.png
images/package_btn.png
images/pallet.png
images/spark.png
images/start_btn.png

3.上述步骤完成后，我们要把这个manifest文件在我们需要的html文件中引入。


<!DOCTYPE html>
<html manifest="test.manifest">
<head>
	<meta charset="UTF-8">
	<title>xxxx</title>
		<meta name="format-detection" content="telephone=no">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/style.css">
	<script type="text/javascript" src="js/zepto.js"></script>
	<script type="text/javascript" src="js/common.js"></script>
	<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
	<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
	<script type="text/javascript" src="js/weixin.js"></script>
</head>

这时候我们打开浏览器测试看看~可以看到控制台打印出manifest的工作信息。下列的话说明路径都找到并进行本地化存储了。
在这里插入图片描述
当然，manifest的操作类型还有另外的几种：

CACHE:设置后面的文件为缓存
NETWORK:置后面的文件为不缓存（无法设置自身页面）
FALLBACK:置后面的文件错误或不存在的时候使用另一个文件
SETTINGS:可以设置fast或prefer-online两种模式

总结

1.manifest缓存之后的路径文件只有在manifest文件的内容发生变化时才会更新。

2.例如若某个css文件内容修改，但是css文件名又未修改的话，其不会重新刷新加载，manifest引用的依旧是第一次的css文件的内容。非常不利于开发阶段的测试工作。并且该基础的manifest缓存技术个人认为较适合页面不加载后台数据并且后期代码不进行变动的页面。请结合利弊进行使用！

琳木兮

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML5的离线储存

HTML5的离线储存怎么使用，工作原理能不能解释一下？一、原理HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示二、使用步骤1.1.首先我们需要在我们的文件目录中新建一个manifest文件“test.manifest”（示例）：2.这是一个简单的manifest文件。文件内开始的时候需要“CACHE MA
复制链接

扫一扫