Open
Description
第8天 简述下html5的离线储存原理，同时说明如何使用？
Metadata
Metadata
Assignees
Labels
Type
Projects
Milestone
Relationships
Development
No branches or pull requests
Participants
{{ message }}
No one assigned
No type
No projects
No milestone
None yet
Activity
[-][html] 第8天 简述下html5的离线储存原理，同时如何说明使用？[/-][+][html] 第8天 简述下html5的离线储存原理，同时说明如何使用？[/+]Konata9 commentedon Jul 4, 2019
请问一下，这一题是不是和第四天的是一样的？
haizhilin2013 commentedon Jul 4, 2019
@Konata9 是有些类似 #10
qhdxwdm commentedon Sep 6, 2019
原理：
HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
如何使用：
① 页面头部像下面一样加入一个manifest的属性。
在cache.manifest文件的编写离线存储的资源。
以#号开头的是注释，一般会在第二行写个版本号，用来在缓存的文件更新时，更新manifest以实现浏览器重新下载新的文件，可以是版本号，时间戳或md5码等。
离线存储的manifest一般由三个部分组成：
① CACHE：必选，表示需要离线存储的资源列表，由于包含manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来。
② NETWORK：可选，可以使用通配符，表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在CACHE和NETWORK中有一个相同的资源，那么这个资源还是会被离线存储，也就是说CACHE的优先级更高。
③ FALLBACK：可选，表示如果访问第一个资源失败，那么就使用第二个资源来替换他，如/html/ /404.html表示用 “404.html” 替代 /html/ 目录中的所有文件，/ /404.html表示用 “404.html” 替代当前目录中的所有文件，*.html /404.html表示用 “404.html” 替代 所有html文件。
原文链接：https://blog.csdn.net/zhouziyu2011/article/details/58588546
randing89 commentedon Oct 17, 2019
appcache 已经被 service worker 替代了 https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache
giggleCYT commentedon Jun 1, 2020
https://www.cnblogs.com/zhangym118/archive/2016/09/22/5897056.html
buuug7 commentedon Jan 16, 2021
#10 ，跟html第四天是同一个问题，建议关闭，参考我的回答，#10 (comment)
amikly commentedon Oct 26, 2021
Service worker
使用
原理
应用程序缓存（Application Cache）
### 使用
引用清单文件
要启用某个应用的应用缓存，请在文档的
html标记中添加 manifest 属性：每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）
manifest 文件的建议的文件扩展名是：".appcache"
注意：manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"，必须在 web 服务器上进行配置
清单文件结构
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest 文件可分为三个部分：
简单的清单格式如下：
原理
基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示
xiaoxiaozhiya commentedon May 26, 2022
H5离线缓存有两种
用法：
用法：
具体可以参考这篇文章
[](http:// www.php.cn/html5-tutorial-485134.html)
闲谈
session是服务器为保护用户状态而创建的一个对象
它保存在服务器端
当客户端第一次向服务器发送一个请求时，会在服务器端创建一个session对象，包括sessionID等，
在http响应中，将SessionID以cookie返回
当客户端再次访问时，会把这个sessionID传给服务器端，比对用户信息
这样的话，sessionID被修改了怎么办？
不要担心，服务器会给sessionID签名滴，别人获取它也没多大的意义嘞~
Iambecauseyouare commentedon Feb 15, 2023
原理：
HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
如何使用：
① 页面头部像下面一样加入一个manifest的属性。
...在cache.manifest文件的编写离线存储的资源。
CACHE MANIFEST
#v0.1
CACHE:
js/index.js
css/index.css
NETWORK:
images/logo.png
FALLBACK:
.html /404.html / / /404.html 或 /html/ /404.html 也可*/
以#号开头的是注释，一般会在第二行写个版本号，用来在缓存的文件更新时，更新manifest以实现浏览器重新下载新的文件，可以是版本号，时间戳或md5码等。
离线存储的manifest一般由三个部分组成：
① CACHE：必选，表示需要离线存储的资源列表，由于包含manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来。
② NETWORK：可选，可以使用通配符，表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在CACHE和NETWORK中有一个相同的资源，那么这个资源还是会被离线存储，也就是说CACHE的优先级更高。
③ FALLBACK：可选，表示如果访问第一个资源失败，那么就使用第二个资源来替换他，如/html/ /404.html表示用 “404.html” 替代 /html/ 目录中的所有文件，/ /404.html表示用 “404.html” 替代当前目录中的所有文件，*.html /404.html表示用 “404.html” 替代 所有html文件。