HTML5的离线储存怎么使用?
这里是修真院前端小课堂,每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能,本篇分享的是:
【 HTML5的离线储存怎么使用?】
1.背景介绍
HTML5提供了很多新的功能以及相应的接口,离线存储就是其中的一个,离线存储可以将站点的一些文件存储在本地,在没有网络的时候还是可以访问到以缓存的对应的站点页面,其中这些文件可以包括html,js,css,img等等文件,但其实即使在有网络的时候,浏览器也会优先使用已离线存储的文件,返回一个200(from cache)头。这跟HTTP的缓存使用策略是不同的。
它是浏览器自己的一种机制,随着移动互联网时代的到来,网络可靠性降低,如果我们已经将需要的文件缓存下下来,一旦网络无法访问,也能继续访问。
而且做好相应资源的缓存可以带来更好的用户体验,当用户使用自己的流量上网时,本地缓存不仅可以提高用户访问速度,而且大大节约用户的使用流量。
2.知识剖析
什么是Manifest:
其实Manifest是一个简单的 文本文件,它的扩展名是任意的,定义需要缓存的文件、资源,当第一次打开时,浏览器会自动缓存相应的资源。
Manifest 的特点:
离线浏览:即当网络断开时,可以继续访问你的页面。
访问速度快:将文件缓存到本地,不需每次都从网络上请求。
稳定性:做了Manifest缓存,遇到突发网络故障或者服务器故障,继续访问本地缓存。
3.常见问题
离线存储有什么优缺点?
优点
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
缺点
更新的资源,需要二次刷新才会被页面采用
不支持增量更新,只有manifest发生变化,所有资源全部重新下载一次
缺乏足够容错机制,当清单中任意资源文件出现加载异常,都会导致整个manifest策略运行异常
4.解决方案
5.编码实战
6.扩展思考
存储网页数据的方式?
localStorage - 没有时间限制的数据存储(永久),对于同一个浏览,当用户关闭浏览器窗口后,数据不会被删除。
sessionStorage - 针对一个 session 的数据存储(sesion/),当用户关闭浏览器窗口后,数据会被删除。
cookie:不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。
7.参考文献
参考一:慕课网-manifest
参考二:MDN-manifest
参考三:知乎-关于前端缓存优化,为什么没人用manifest?
8.更多讨论
浏览器对离线存储的大小有限制吗?
其他的离线存储各自应该在什么情况下使用?
除了这些还有其他能实现离线存储的方式吗?
鸣谢
感谢大家观看
BY
孙剑立-肖浩宇-杨刚
课后问答:
1.浏览器跟踪时清除了缓存是否能取消跟踪?
答:能,这里的缓存其实不是manifest,而是cookie,清除缓存后,cookie被清除。
2.:cookie有哪些优点?
答:他的缺点来自于他的优点,因为cookie会跟踪浏览器发送http请求,所以通过它可以实现用户身份认证等一系列功能,也是因为这样频繁的发送cookie,占用了带宽。
3.manifest怎么用?
http://www.w3school.com.cn/html5/html_5_app_cache.asp
ppt链接:https://ptteng.github.io/PPT/PPT/css-15-Html5%20offline%20storage.html
视频链接:https://pan.baidu.com/s/1kUFHKAN
密码: va8q
今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~
HTML5的离线储存怎么使用?相关推荐
- [html] 浏览器是怎么对HTML5的离线储存资源进行管理和加载的
[html] 浏览器是怎么对HTML5的离线储存资源进行管理和加载的 在线的情况下,浏览器发现html头部有manifest属性,它会请求manifest文件,如果是第一次访问app,那么浏览器就会根 ...
- [html] 简述下html5的离线储存原理,同时说明如何使用?
[html] 简述下html5的离线储存原理,同时说明如何使用? 原理:HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术),通过这个文件上的解析清单离线存储资源,这些 ...
- HTML5的离线储存
在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件. 原理:HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储 ...
- html5 离线浏览,HTML5的离线储存怎么使用?
这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能,本篇分享的是: [ HTML5的 ...
- html文件离线可以打开,HTML5的离线储存怎么使用
大家好,我是IT修真院深圳分院第02期学员孙剑立,一枚正直善良的web程序员. 今天给大家分享一下,修真院官网CSS任务15中有关HTML5的离线储存怎么使用? 1.背景介绍 HTML5提供了很多新的 ...
- HTML5的离线储存怎么使用,它的工作原理是什么?
离线缓存的目的是当浏览器处于离线状态或网络连接较慢时,利用应用程序缓存机制让web程序能在离线状态下正常访问.使用离线缓存技术一般是为了让用户在: 离线状态也能正常访问 提高访问速度 减轻服务器响应压 ...
- [html] HTML5的文件离线储存怎么使用,工作原理是什么?
[html] HTML5的文件离线储存怎么使用,工作原理是什么? localstorge 利用浏览器的本地存储可以缓存信息 ,在创建数据的时候引入创建好的数据 cookie 好像也可以 个人简介 我是 ...
- html5离线储存不足,html5的离线存储问题
HTML5的一个重要特性就是离线存储,所谓的离线存储就是将一些资源文件保存在本地,这样后续的页面重新加载将使用本地资源文件,在离线情况下可以继续访问web应用,同时通过一定的手法(更新相关文件或者使用 ...
- 使用HTML5开发离线应用 - cache manifest
HTML5 是目前正在讨论的新一代 HTML 标准,它代表了现在 Web 领域的最新发展方向.在 HTML5 标准中,加入了新的多样的内容描述标签,直接支持表单验证.视频音频标签.网页元素的拖拽.离线 ...
最新文章
- $httpprovider指令中拦截器interceptors的使用介绍
- 创建型设计模式 之 单例模式
- web自动化测试---概述
- 【算法竞赛学习】二手车交易价格预测-Baseline
- Java————迷宫问题
- 信息学奥赛一本通 1164:digit函数
- android 测试工具,安卓测试工具的几种实现方式
- 苹果MAC系统读写NTFS格式u盘硬盘方法
- 手把手教如何用bib文件在latex里引用文献
- Linux目录结构和文件、目录常用命令
- 如何通过织云Lite愉快地玩转TSW
- 织梦后台图片预览功能跳到顶部怎么修改
- 从word2vec到node2vec
- Agent with Warm Start and Active Termination for Plane Localization in 3DUltrasound基于强化学习的超声标准切面
- Cloudera搭建部署
- java毕业设计智能交通管控系统Mybatis+系统+数据库+调试部署
- 自学前端第二十九天 CSS高级之细节技巧
- 利用神经网络进行艺术风格迁移
- Select下拉框实现中国省市区三级联动
- 计算机应用基础 双语 答案,计算机应用基础(双语)课件PPTChax
热门文章
- 弹性布局(伸缩布局)
- jQuery Validate自定义验证
- 服务器iis显示无法连接,iis服务器-iis连接不上怎么回事iis连接不上服务器怎么回事 爱问知识人...
- 在vue的templete中使用js方法时踩坑
- 青龙毛毛快手极速版果园
- Spring Cloud Ribbon的使用详解
- 7.0android版本点三下,StarStar
- Redis C客户端API
- [解决] failed to receive handshake ssl/tls connection failed github
- 计算机支持最大内存大小,64位电脑系统可以支持多大内存【详细介绍】