《HTML5与JavaScrip程序设计》项目八 HTML5本地存储与离线存储 教学课件.pptVIP

05思考与练习1.浏览器是怎么样解析manifest？2.浏览网页缓存与本地缓存的区别在哪里？05思考与练习尝试应用HTML5离线应用程序缓存事件，打开前端开发工具HBuilder，在项目subject08中新建一个HTML文件：exercise01-2.html，使用JQuery的on()方法为窗口的applicationCache对象绑定事件，每个事件触发将会输出到屏幕上。最终效果图8-12所示。图8-12谢谢!*亮亮图文旗舰店亮亮图文旗舰店*HTML5与JavaScrip程序设计北京出版社0102Web前端开发基础JavaScript基本语法JavaScript数组JavaScript函数JavaScript对象0304050706080910JavaScript事件JavaScript正则表达式HTML5本地与离线存储应用HTML5画布Canvas应用综合案例--网页小游戏制作项目八HTML5本地与离线存储应用任务一HTML5本地存储任务二HTML5离线存储当前在电脑客户端上各类主流浏览器都在不同程度上支持HTML5，因此越来越多客户端使用到本地与离线存储，而实现存储的方法是多种多样的，但是传统的Cookie存储方案和服务器端存储方案都不太尽如人意。为此，在HTML5中，Web存储API为用户如何在计算机或设备上存储用户信息作了数据标准的定义。本项目让我们一起来检查HTML5存储的支持情况，了解和熟悉HTML5标准中两种在客户端存储数据的函数：localStorage和sessionStorage。在学习中我们主要通过几个案例应用本地与离线存储从而提升Web用户体验。01因为校园网络不太稳定，小明日常都切换成移动数据流量进行上网，但是小明最近发现自己的移动流量不太充裕了，而且在信号不太好的地方打开HTML5网页往往需要等待一段时间，用户体验感十分差，这让小明很抓狂。通过网络搜索，小明发现可以在用户本地浏览器上存储一些应用数据来改善网页加载速度慢的问题。通过更进一步的深究，小明发现传统的Cookie存储的方案已经不能满足发展的需求，而使用服务器端存储的方案也太过复杂，目前理想的解决方案是HTML5的本地存储。完成任务任务描述了解本地存储由来的背景。了解本地存储和Cookies的区别。能检测移动浏览器是否支持HTML5的本地存储。能利用localStorage进行本地存储能力目标知识目标学习目标思政目标科技创新，来源生活，服务人类031Cookie的限制大多数浏览器支持最大为4096字节的Cookie。知识链接243有些浏览器还会对它们将接受的来自所有站点的Cookie总数作出绝对限制，通常为300个。Cookie默认情况都会随着Http请求发送到后台服务器，但并不是所有请求都需要Cookie的。浏览器还限制站点可以在用户计算机上存储的Cookie的数量。大多数浏览器只允许每个站点存储20个Cookie；如果试图存储更多Cookie，则最旧的Cookie便会被丢弃。03知识链接（1）WebStorage存储。其为在cookie之外提供另外一种能够存储用户会话数据的方式，并且实现了存储量更大同时还能跨越访问的形式。在WebStorage中不单单给予开发人员更加便捷实用的接口，使得数据操作更加便捷，而且还提供了独立的存储空间，使得数据的存放变得更加有条理。WebStorage包括sessionStorage和localStorage。其两者均为以“键值对”的形式来将数据进行存储。开发人员能够使用相关代码对其中的“键值对”进行设计，并且在下次加载页面时利用相关代码将其读取出来。HTML5进行本地存储一共有以下规范标准，分别为WebStorage、WebSQLDatabase以及IndexedDB。03知识链接（2）WebSQLDatabase的应用能够弥补WebStorage无法完善存储大数据问题的缺陷。WebSQLDatabase的核心方法分别为openDatabase、transaction和executeSql，分别可以实现数据库的新建、打开、出来以及记录的相关处理。（3）IndexedDB。开发人员可以在域中建立多个IndexedDB数据库实例，并且在每一个数据库实例中又可以存储多个对象。IndexedDB的API接口可以分为同步与异步版本，通常情况下均使用异步版本API。03知识链接HTML5的WebStorag