发表于: 2017-04-05 21:52:35

2 1144


HTML5的离线储存怎么使用?

小课堂【北京第72期】

分享人:汤金鑫

目录

1.背景介绍

2.知识剖析

3.常见问题

4.编码实战

5.扩展思考

6.参考文献

7.更多讨论

1.背景介绍

什么是离线的webAPP
离线==没有网路环境 弱网络

2.知识剖析

1.离线浏览。功能就是缓存数据 2.本地保存用户的操作数据--离线编辑,在线发送

常见问题

原理是什么

编码实战

  1.H5提供的数据持久化技术
2.Application Cache 本地缓存应用所需的文件(只能保存应用 不能保存数据)
3.Local storagr&session storage 键值对(Key-Value)存储数据(Dom存储)
可以是可以是应用所需要的数据 也可以数用户产生的数据
4.web SQL (关系数据库),通过SQL语句访问(占用资源少,处理速度快)
5.IndexDB (索引数据库)跟localstoragr一样区别是存储大,搜索快
1.Application Cache Manifest文件 那么触发这个下载的事件 1.只有Manifest文件变化的时候才会更新
2.一次必须更新里面的所有的文件(比如有10个文件第一次你更新了9个文件然后还有一个文件没有更新上去,那么系统就把所以下载的9个文件都会删除掉,第二次会重新更新10个文件)
3.下载完第二次才会有效(就像是你重装系统,然后提示重新启动才会有效)
4.所以有了延迟 更新失败(通过localstoragr 来弥补)
5.应用
!DOCTYPE HTML
+html manifest = "cache.manifest"
6.页头插入这个文件
还有 有些会这样写 除了上面的这个离线的 其他的都要通过网路进行访问 NETWORK:
*
http://m.ftchinese.com/phone.html#=home 例子

扩展思考

为什么要使用webAPP?优势?
优势
1.开发成本低;
2.适配多种移动设备成本低;
3.跨平台和终端;
4.迭代更新容易;
5.无需安装成本;

6.参考文献

参考一:慕课网

7.更多讨论

webAPP劣势?
劣势
1.浏览的体验短期内还无法超越原生应用;
2.不支持离线模式(html5将会解决这个问题);
3.消息推送不够及时;
4.调用本地文件系统的能力弱;

鸣谢

感谢大家观看

今天完成的事情:

     1.小课堂

     2.pc车主端的接口的对接

明天计划的事情:  

     1.下拉刷新APP所有页面的修改(新需求)

     2.货主端页面的制作

遇到的问题和解决:

    1.小课堂准备不充分

收获: 

    1.H5的离线缓存


返回列表 返回列表
评论

    分享到