Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[html] 第4天 HTML5的文件离线储存怎么使用，工作原理是什么？ #10

Open
haizhilin2013 opened this issue Apr 19, 2019 · 29 comments
Open

[html] 第4天 HTML5的文件离线储存怎么使用，工作原理是什么？ #10

haizhilin2013 opened this issue Apr 19, 2019 · 29 comments
Labels
html html

Comments

@haizhilin2013
Copy link
Collaborator

第4天 HTML5的文件离线储存怎么使用，工作原理是什么？
@haizhilin2013 haizhilin2013 added the html html label Apr 19, 2019
@hbl045
Copy link

hbl045 commented May 5, 2019

localstorge 利用浏览器的本地存储可以缓存信息 ，在创建数据的时候引入创建好的数据
cookie 好像也可以

@tiyunchen
Copy link

service workers 好像也可以 .
Service workers 基本上充当应用同服务器之间的代理服务器，可以用于拦截请求，也就意味着可以在离线环境下响应请求，从而提供更好的离线体验。同时，它还可以接收服务器推送和后台同步 API。
service workers

@DarthVaderrr
Copy link

manifest 可以标记一些缓存资源，在离线的时候使用

@poporeki
Copy link

poporeki commented Jul 4, 2019

localStorage 原理并不清楚啊，只知道怎么用
localStorage 中的键值对总是以字符串的形式存储。可以长期被保存

//增加
localStorage.setItem('myCat', 'Tom');
//获取
let cat = localStorage.getItem('myCat');
//删除所有
localStorage.clear();

@haizhilin2013 haizhilin2013 mentioned this issue Jul 4, 2019
Open
@seho-dev
Copy link

seho-dev commented Jul 14, 2019 •
edited

除了我们的storge，记得在毕业的时候，遇到了一个刁难的面试官问我，如何用h5的新特性操作一个100mb的存储和读写；

localstorge仅仅可以存储3-4mb的大小，在特殊的场景下可以更多，cookie就更少了；只有几kb；
用h5操作数据库也可以，但是面试官说不能操作数据库；

所以面试官的答案是：h5可以对本地的文件有777权限，可以任意读写；所以用h5存一个100m的东西到本地，然后再读出来；

这个不知道是胡说的还是什么，但是感觉很牵强，所以也算是一个答案吧

@Konata9
Copy link

Konata9 commented Jul 21, 2019

HTML5 的离线存储
HTML5 存储方式
HTML5 离线存储原理

离线存储是在 HTML 5 中创建 cache manifest 文件来实现 Web 应用的离线版本的。

离线存储有这么几个好处：没有网络时可以浏览、加快资源的加载速度、减少服务器负载

离线存储的相关配置在 .appcache 文件中。
通过配置 CACHE MANIFEST, NETWORK, FALLBACK 来控制需要被缓存的文件。
JavaScript 也暴露了 applicationCache API 让我们手动进行缓存的刷新。

@smallWhitevv
Copy link

安利个链接 ，讲的很细 。https://segmentfault.com/a/1190000000732617

@gu-xionghong
Copy link

补充知识点： IndexedDB - 一种在用户浏览器中持久存储数据的方法。

@wsb260
Copy link

wsb260 commented Jul 30, 2019 •
edited

优点:

没有网络时可以浏览,加快资源的加载速度,减少服务器负载

使用:

只需要在页面头部加入,然后创建manifest.appcache文件

manifest.appcache文件配置:

1)CACHE MANIFEST放在第一行
2)CACHE:表示需要离线存储的资源列表,由于包含manifest文件的页面将被自动离线存储,所以不需要列出来
3)NETWORK:表示在线才能访问的资源列表,如果CACHE列表里也存在,则CACHE优先级更高
4)FALLBACK:表示如果访问第一个资源是吧,那么使用第二个资源来替换它

浏览器如何解析manifest

1.在线情况:浏览器发现html头部有manifest属性,他会请求manifest文件,如果是第一次访问,那么浏览器会根据manifest文件的内容下载相应的资源并且进行离线存储.如果已经访问过并存储,那么浏览器使用 离线的资源价值,然后对比新的文件,如果没有发生改变就不做任何操作,如果文件改变了,那么就会重新下载文件中的资源并进行离线存储
2.离线情况:浏览器就直接使用离线存储资源

与传统浏览器的区别

1)离线缓存是针对整个应用,浏览器缓存是单个文件
2)离线缓存可以主动通知浏览器更新资源

状态 window.applicationCache对象的status属性

0:无缓存
1:闲置
2.检查中,正在下载描述文件并检查更新
3:下载中
4:更新完成
5:废弃,应用缓存的描述文件已经不存在了,因此页面无法再访问应用缓存

事件 window.applicationCache对象的相关事件

1)oncached:当离线资源存储完成之后就触发这个事件
2)onchecking:当浏览器对离线存储资源进行更新检查的时候触发
3)ondounloading:当浏览器开始下载离线资源的时候会触发
4)onprogress:当浏览器在下载每一个资源的时候会触发
5)onupdateready:当浏览器对离线资源更新完成之后触发
6)onnoupdate:当浏览器检查更新之后发现没有这个资源时触发

注意事项

站点离线存储的容量限制是5M
如果manifest文件,或者内部列举的某一个文件不能正常下载,整个更新过程将视为失败,浏览器继续全部使用老的缓存
引用manifest的html必须与manifest文件同源,在同一个域下
在manifest中使用的相对路径,相对参照物为manifest文件
CACHE MANIFEST字符串硬在第一行,且必不可少
系统会自动缓存引用清单文件的HTML文件
manifest文件中CACHE则与NETWORK，FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面
FALLBACK中的资源必须和manifest文件同源
当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问
当manifest文件发生改变时，资源请求本身也会触发更新

This was referenced Aug 8, 2019
Open
Open
@FurryWolfX
Copy link

除了我们的storge，记得在毕业的时候，遇到了一个刁难的面试官问我，如何用h5的新特性操作一个100mb的存储和读写；

localstorge仅仅可以存储3-4mb的大小，在特殊的场景下可以更多，cookie就更少了；只有几kb；
用h5操作数据库也可以，但是面试官说不能操作数据库；

所以面试官的答案是：h5可以对本地的文件有777权限，可以任意读写；所以用h5存一个100m的东西到本地，然后再读出来；

这个不知道是胡说的还是什么，但是感觉很牵强，所以也算是一个答案吧

浏览器不可能对本地文件有777权限的，不然就乱套了，打开个网页操作磁盘文件，完全无安全性可言。操作大量离线数据可以用浏览器内置的DB，如IndexedDB。

@haizhilin2013
Copy link
Collaborator Author

除了我们的storge，记得在毕业的时候，遇到了一个刁难的面试官问我，如何用h5的新特性操作一个100mb的存储和读写；

localstorge仅仅可以存储3-4mb的大小，在特殊的场景下可以更多，cookie就更少了；只有几kb；
用h5操作数据库也可以，但是面试官说不能操作数据库；

所以面试官的答案是：h5可以对本地的文件有777权限，可以任意读写；所以用h5存一个100m的东西到本地，然后再读出来；

这个不知道是胡说的还是什么，但是感觉很牵强，所以也算是一个答案吧

这个回答就像是我在第53天提问的另外一个问题：#210
那个面试官说的h5可以对本地文件操作，估计是遇到了个假的面试官

@FurryWolfX
Copy link

除了我们的storge，记得在毕业的时候，遇到了一个刁难的面试官问我，如何用h5的新特性操作一个100mb的存储和读写；
localstorge仅仅可以存储3-4mb的大小，在特殊的场景下可以更多，cookie就更少了；只有几kb；
用h5操作数据库也可以，但是面试官说不能操作数据库；
所以面试官的答案是：h5可以对本地的文件有777权限，可以任意读写；所以用h5存一个100m的东西到本地，然后再读出来；
这个不知道是胡说的还是什么，但是感觉很牵强，所以也算是一个答案吧

这个回答就像是我在第53天提问的另外一个问题：#210
那个面试官说的h5可以对本地文件操作，估计是遇到了个假的面试官

哈哈确实算假面试官了，H5能读文件，但不能写。如果需要读写文件，需要配合Native插件，如IE的ActiveX。但这个不属于H5。现在的浏览器也基本不支持这种用法了（安全隐患过于严重）。

@blueRoach
Copy link

manifest

xx.manifest

CACHE MANIFEST

CACHE: //需要缓存的文件
xx.js

NETWORK: //不需要缓存的文件
cc.js

FALLBACK: //缓存失败后使用的文件
xx.js/vv.js

@1415333545
Copy link

sessionStorage
localStorage
cookie
webSql
indexDB

推荐一个本地异步存储的js库
localForage(http://localforage.docschina.org/) 有一个优雅降级策略，若浏览器不支持 IndexedDB 或 WebSQL，则使用 localStorage。在所有主流浏览器中都可用：Chrome，Firefox，IE 和 Safari（包括 Safari Mobile）。

@giggleCYT
Copy link

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

怎么用：
首先，在html页面头部加入一个manifest的属性:

<!DOCTYPE HTML>
<html manifest = "cache.manifest">
...
</html>

然后书写cache.manifest文件：

CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html

manifest （即 .appcache 文件）文件是简单的文本文件，可分为三个部分：
CACHE ：
在此标题下列出的文件将在首次下载后进行缓存。（由于包含manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来）
NETWORK ：
在此标题下列出的文件需要与服务器的连接，且不会被缓存，离线时无法使用。 
可以使用 “*” 来指示所有其他资源/文件都需要因特网连接：
NETWORK: *
如果在CACHE和NETWORK中有一个相同的资源，那么这个资源还是会被离线存储，也就是说CACHE的优先级更高。
FALLBACK：
在此标题下列出的文件规定当页面无法访问时的回退页面。比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问offline.html。

浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？
在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器就直接使用离线存储的资源。

@githubzml
Copy link

弊端就是 用户终要进行有网络的交互行为 直接展示404页面找不到 或者提示没有网络亦可
毕竟 离线存储容量限制为5M 也不能进行其他什么操作 比如进入一个详情页都进不了

@buuug7
Copy link

buuug7 commented Jan 8, 2021 •
edited

看了上面的回答，都是不正确的还点赞那么多对新人是误导。客户端离线缓存使用manifest.appcache这种方式早就被废弃了，详情参考Using_the_application_cache，替代的方式是使用Using_Service_Workers。

Service Work 现在已经完全普及，主流的Web框架都会集成该功能并做到开箱即用，例如 create-react-app 都已经集成到脚手架中，开发者不需要单独配置就可以使用离线文件缓存。

Service Work 工作原理是在客户端请求网站的时候，先注册Service Work，然后利用其拦截并缓存页面所需要的资源，当离线的时候，请求的资源会优先从Service Work 缓存的资源中返回。

@buuug7
Copy link

buuug7 commented Jan 8, 2021

service workers 好像也可以 .
Service workers 基本上充当应用同服务器之间的代理服务器，可以用于拦截请求，也就意味着可以在离线环境下响应请求，从而提供更好的离线体验。同时，它还可以接收服务器推送和后台同步 API。
service workers

现在都是Service Work的方式来做离线缓存了

@mono2048
Copy link

HTML5 的离线存储
HTML5 存储方式
HTML5 离线存储原理

离线存储是在 HTML 5 中创建 cache manifest 文件来实现 Web 应用的离线版本的。

离线存储有这么几个好处：没有网络时可以浏览、加快资源的加载速度、减少服务器负载

离线存储的相关配置在 .appcache 文件中。
通过配置 CACHE MANIFEST, NETWORK, FALLBACK 来控制需要被缓存的文件。
JavaScript 也暴露了 applicationCache API 让我们手动进行缓存的刷新。

@shisan13yan
Copy link

manifest

@amikly
Copy link

amikly commented Oct 22, 2021 •
edited

Service worker

使用

原理

应用程序缓存（Application Cache）

使用

引用清单文件

要启用某个应用的应用缓存，请在文档的 html 标记中添加 manifest 属性：

<html manifest="example.appcache">
  ...
</html>

每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）

manifest 文件的建议的文件扩展名是：".appcache"

注意：manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"，必须在 web 服务器上进行配置

清单文件结构

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。

manifest 文件可分为三个部分：

  • CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
  • NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
  • FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

简单的清单格式如下：

CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js

原理

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

@tk12138
Copy link

tk12138 commented Nov 5, 2021

答：Web App中一部分资源并不是经常改变，并不需要每次都向服务器发出请求，出于这些原因，HTML5提出的一个新的特性：离线存储。通过离线存储，我们可以通过把需要离线存储在本地的文件列在一个manifest配置文件中，这样即使在离线的情况下，用户也可以正常使用App。
①　首先来讲解下离线存储的使用方法，说起来也很简单。只要在你的页面头部像下面一样加入一个manifest的属性就可以了。
1.<!DOCTYPE HTML>
2.<html manifest = "cache.manifest">
3....
4.
然后cache.manifest文件的书写方式，就像下面这样：
1.CACHE MANIFEST
2.#v0.11
3.
4.CACHE:
5.
6.js/app.js
7.css/style.css
8.
9.NETWORK:
10.resourse/logo.png
11.
12.FALLBACK:
13./ /offline.html
离线存储的manifest一般由三个部分组成:
1.CACHE:表示需要离线存储的资源列表，由于包含manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来。
2.NETWORK:表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在CACHE和NETWORK中有一个相同的资源，那么这个资源还是会被离线存储，也就是说CACHE的优先级更高。
3.FALLBACK:表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问offline.html。
②　浏览器如何解析manifest?
在线的情况下，浏览器发现html头部有manifest属性，会请求manifest文件，如果是第一次访问app,那么浏览器会根据manifest文件的内容下载相应的资源并进行离线存储。如果已经访问过app并且资源已经离线存储，那么浏览器会使用离线资源加载页面，然后浏览器会对比新的manifest文件和旧的manifest文件，如果文件没有发生变化，就不做任何操作，否则就会重新下载文件中的资源并进行离线存储。
在这个过程中，需要注意：
如果服务器对离线的资源进行了更新，那么必须更新manifest文件之后这些资源才能被浏览器重新下载，如果只是更新了资源而没有更新manifest文件，浏览器不会重新下载资源，也就是说还是会使用原来离线存储的资源；
对于manifest文件进行缓存时需要小心，因为可能出现一种情况时你对manifest文件进行了更新，但是http的缓存规则告诉浏览器本地缓存的manifest文件还没有过期，这个情况下浏览器还是使用原来的manifest文件，所以对manifest文件最好不要设置缓存。
浏览器在现在manifest文件中的资源时，会一次性下载所有资源，如果某个资源由于某种原因下载失败，那么这次的所有更新都算是失败，浏览器还是会使用原来的资源。
在更新了资源之后，新的资源需要到下次再次打开app才会生效，出现这种现象的原因时浏览器会先使用离线资源加载页面，然后再去检查manifest是否有更新，所以需要下次打开页面才能生效。
对于H5中离线存储对象window.applicationCache需要注意的是：
oncached: 当离线资源存储完成之后触发这个事件
onchecking: 当浏览器对离线存储资源进行更新检查的时候会触发这个事件。
ondownloading: 当浏览器开始下载离线资源时触发这个事件。
onprogress: 当浏览器下载每一个资源时会触发这个事件，每下载一个资源就会触发一次。
onupdateready: 当浏览器对离线资源更新完成后会触发这个事件。
onnoupdate: 当浏览器检查更新之后发现没有资源更新的时候会触发这个事件。

@kankan-web
Copy link

给个链接地址：但是这个方案已经失效了，很多坑，很鸡肋

@WangXi01
Copy link

优点:
没有网络时可以浏览,加快资源的加载速度,减少服务器负载

使用:
只需要在页面头部加入,然后创建manifest.appcache文件

manifest.appcache文件配置:
1)CACHE MANIFEST放在第一行
2)CACHE:表示需要离线存储的资源列表,由于包含manifest文件的页面将被自动离线存储,所以不需要列出来
3)NETWORK:表示在线才能访问的资源列表,如果CACHE列表里也存在,则CACHE优先级更高
4)FALLBACK:表示如果访问第一个资源是吧,那么使用第二个资源来替换它

浏览器如何解析manifest
1.在线情况:浏览器发现html头部有manifest属性,他会请求manifest文件,如果是第一次访问,那么浏览器会根据manifest文件的内容下载相应的资源并且进行离线存储.如果已经访问过并存储,那么浏览器使用 离线的资源价值,然后对比新的文件,如果没有发生改变就不做任何操作,如果文件改变了,那么就会重新下载文件中的资源并进行离线存储
2.离线情况:浏览器就直接使用离线存储资源

与传统浏览器的区别
1)离线缓存是针对整个应用,浏览器缓存是单个文件
2)离线缓存可以主动通知浏览器更新资源

状态 window.applicationCache对象的status属性
0:无缓存
1:闲置
2.检查中,正在下载描述文件并检查更新
3:下载中
4:更新完成
5:废弃,应用缓存的描述文件已经不存在了,因此页面无法再访问应用缓存

事件 window.applicationCache对象的相关事件
1)oncached:当离线资源存储完成之后就触发这个事件
2)onchecking:当浏览器对离线存储资源进行更新检查的时候触发
3)ondounloading:当浏览器开始下载离线资源的时候会触发
4)onprogress:当浏览器在下载每一个资源的时候会触发
5)onupdateready:当浏览器对离线资源更新完成之后触发
6)onnoupdate:当浏览器检查更新之后发现没有这个资源时触发

注意事项
站点离线存储的容量限制是5M
如果manifest文件,或者内部列举的某一个文件不能正常下载,整个更新过程将视为失败,浏览器继续全部使用老的缓存
引用manifest的html必须与manifest文件同源,在同一个域下
在manifest中使用的相对路径,相对参照物为manifest文件
CACHE MANIFEST字符串硬在第一行,且必不可少
系统会自动缓存引用清单文件的HTML文件
manifest文件中CACHE则与NETWORK，FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面
FALLBACK中的资源必须和manifest文件同源
当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问
当manifest文件发生改变时，资源请求本身也会触发更新

@GitHubJiKe
Copy link

https://www.w3.org/TR/webdatabase/

@GuaGuami
Copy link

我觉得这个写的很不错 https://www.cnblogs.com/jing-tian/p/11011369.html

@Iambecauseyouare
Copy link

使用方法：创建一个和html同名的manifest文件，然后在页面头部加入manifest属性：manifest="index.manifest",然后cache。manifest文件中编写需要离线存储的资源，在离线状态下，操作window.applicatiobCahe进行离线缓存的操作
原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制（不是存储技术），通过这个文件上的解析清单离线存储资源，这些支援就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示

@keenesun
Copy link

keenesun commented Nov 1, 2023

  1. storage
  2. cookie
  3. webSQL
  4. indexDB

@lili-0923
Copy link

只需要在页面头部加入,然后创建manifest.appcache文件
1.在线情况:浏览器发现html头部有manifest属性,他会请求manifest文件,如果是第一次访问,那么浏览器会根据manifest文件的内容下载相应的资源并且进行离线存储.如果已经访问过并存储,那么浏览器使用 离线的资源价值,然后对比新的文件,如果没有发生改变就不做任何操作,如果文件改变了,那么就会重新下载文件中的资源并进行离线存储
2.离线情况:浏览器就直接使用离线存储资源

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
html html
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests