h5离线存储
2021-11-25 本文已影响0人
无花无酒_3cd3
编写manifest.manifest
CACHE MANIFEST
#version 1.3
CACHE:
img/1.jpg
img/2.jpg
test.css
index.html
NETWORK:
*
1、第一行是CACHE MANIFEST 这是必须需要的。
2、CACHE（必须） 标识出哪些文件需要缓存，可以是相对路径也可以是绝对路径。这里列举出来的文件，当第一次加载下来时，会被浏览器缓存在本地。
3、NETWORk 这一部分是要绕过缓存直接读取的文件，可以使用通配符 ，大多数网站使用 * 。 当使用 时 表示出 CACHE指定文件外，其它所有页面都需要联网访问。
4、FALLBACK （可选） 当资源无法访问时，浏览器使用后备资源去替代。第二个表示后备页面。两个 URI 都必须使用相对路径并且与清单文件同源。可以使用通配符。
编写index.html
<!DOCTYPE html>
<html lang="en" manifest="./manifest.manifest">
<head>
<meta charset="UTF-8">
<title> CACHE</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head><!-- text/cache-mainfest -->
<body>
<img src="img/1.jpg">
<!-- <img src="image/2.jpg"> -->
离线;;;
<script type="text/javascript">
window.addEventListener('load', function(e){
console.log(window.applicationCache);
})
</script>
</body>
</html>
