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

[haizhilin2013]

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

[hbl045]

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

[tiyunchen]

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

[DarthVaderrr]

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

[poporeki]

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

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

[1018715564]

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

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

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

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

[Konata9]

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

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

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

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

[smallWhitevv]

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

[gu-xionghong]

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

[wsb260]

优点:

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

使用:

只需要在页面头部加入,然后创建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文件发生改变时，资源请求本身也会触发更新

[FurryWolfX]

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

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

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

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

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

[haizhilin2013]

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

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

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

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

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

[FurryWolfX]

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

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

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

[blueRoach]

manifest

xx.manifest

CACHE MANIFEST

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

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

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

[1415333545]

sessionStorage
localStorage
cookie
webSql
indexDB

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

[giggleCYT]

原理：
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]

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

[buuug7]

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

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

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

[buuug7]

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

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