《响应式网页开发实战》教学教案—第4章--HTML5离线存储.docx

《《响应式网页开发实战》教学教案—第4章--HTML5离线存储.docx》由会员分享，可在线阅读，更多相关《《响应式网页开发实战》教学教案—第4章--HTML5离线存储.docx（10页珍藏版）》请在第一文库网上搜索。

1、4.1使用Web Storage制作通讯录【教学导航】教学目标(1)学会分析情况使用本地存储(2) 了解实现离线存储的方式(3)掌握Web Storage提供的存储和获取数据的方法(4)掌握 locaIStorage 与 sessionStorage 的区别重难点(1) Web Storage提供的存储和获取数据的方法(2) local Storage 与 sessionStorage 的区别教学方法任务驱动法、分组讨论法、理论实践一体化、讲练结合课时建议4课时【教学任务】4.1.1任务描述请通过Web Storage制作如下图4.1 (1)所示的简单的通讯录，主要实现如下功能：(1)录入联系

2、人，联系人有姓名、手机号码2个字段，以手机号作为key存入 local Storage；(2)根据手机号码，查找机主；(3)列出当前已保存的所有联系人信息；网页效果如图4.1 (1)、4.1 (2)、4.1 (3)所示：输入手机号：查找机主显示全部I图4.1 (1)通讯录网页效果图姓名：乔布斯手机：15800000000新墙已录输入手机号：彳5800000000叵赢壬砺全部15800000000的机主是：乔布斯图4.1 (2)查找机主效果图姓名：李女士手机：15200000000输入手机号：单埒呼显示全部姓名一李女士乔布斯王先生手机号码15200000000158000000001830000

3、0000图4.1 (3)显示所有联系人信息效果图1 .1.2任务知识1本地存储的实现方式2 Web Storage 简介3 local Storage4 sessionStorage5 localStorage 与 sessionStorage 的区别6 .1.3任务实施任务描述中需完成的通讯录，具备三个主要功能，包括保存联系人，查找联系人，和显示所有的已保存的联系人信息。因此，分别需用三个函数来实现以上功能。其中，save。函数用来实现保存数据，使用localStorage的setitem方法将联系人的手机号作为key存入了 localStorage； find。函数实现查找记录，使用loc

4、alStorage的getltem通过手机号作为key值查找出联系人姓名；loadA()函数展现所有已保存的联系人信息，需要使用localStorage.key(ind6x)方法实现。完整代码，参见源代码Task4-l.html。4.2 使用IndexedDB制作网址收藏夹【教学导航】教学目标(1)理解IndexedDB数据库的特点。(2)掌握创建并连接数据库的方法。(3)掌握创建对象存储空间的方法。(4)掌握新增、获取、修改和删除数据的方法重难点(1)创建并连接IndexedDB数据库的方法(2)新增、获取、修改和删除数据的方法教学方法任务驱动法、分组讨论法、理论实践一体化、讲练结合课时建议

5、4课时【教学任务】4.2.1 任务描述使用IndexedDB数据库实现一个如下图4.8 (1)所示的网址收藏夹，主要实现的功能有：(1)输入网址的详细信息之后，单击“新增链接”按钮，弹出添加成功按钮，并将用户输入的数据保存到IndexedDB数据库中。如图48 (2)、图4.8 (3)和图4.8 (4)所示。(2)单击“显示所有链接”按钮可将所有用户输入的数据显示到下方。如图4.8 (5)所示。(3)单击“详细”可从IndexedDB中获取数据，显示出收藏网址的详细信息。如图4.8 (6)所小o(4)单击“删除”可从IndcxedDB数据库删除该条网址信息。网址收藏夹名称：URL址:描述：So

6、me websiteA site about something新增链接显示所有链接。暂无链接。图4.8 (1)网址收藏夹效果图此网页显示添加链接成功图4.8 (2)输入网址效果图图4.8 (3)输入网址效果图G (5J Elements Console Sources Network P description: 新沧网苜页“)图4.8 (4)添加网址到IndexedDB的效果图网址收藏夹翻信息名称：URLWlt：磔：新增链接新布有够新海网(详细解)g(隐明网址收藏夹-iMSURL地址:髓：Some websiteA site about something新增链接显示所有伍接百度(详细剔除

7、)Sd0(睡映)百度URL: 描述:百度首页图4.8 (5)显示所有链接的效果图4.2.2任务知识1 IndexedDB数据库概述图4.8 (6)显示网址的详细信息的效果图2数据库操作3数据表操作4数据操作4.2.3 任务实施任务描述中需完成的网址收藏夹，主要具有四个主要功能，新增链接，显示所有链接、查看详细信息、删除网址信息 因此，分别创建了四个函数来分别实现上述功能。(1)创建addLink()函数实现向IndexedDB数据库中保存数据的操作，在addLink()函数中使用put()方法向数据库中添加新增的网址信息。(2)创建showLinks()函数使用游标来显示数据库中保存的所有链接

8、，在showLinks()函数中，需要调用oenCursor()方法创建游标来检索多个数据，并且调用cursor.continue()方法访问下一条数据，直到访问所有已保存的数据。(3 )创建getLinkDetails()函数用来显示收藏网址的详细信息，在getLinkDetails()函数需要调用get()方法用来读取数据。(4)创建deleteLink()函数实现从IndexedDB数据库中删除所保存的网址的操作。在deleteLink()函数中调用delete。方法，通过key删除对象。完整代码，请参见源代码中Task4-3.html。4.3 搭建简单的离线应用程序【教学导航】教学目标

9、(1)理解离线Web应用掌握(2)掌握Manifest文件的结构。(3)掌握如何正确配置Manifest文件的MIME-type(4)掌握更新缓存的方法。(5)掌握Application Cache对象的相关方法重难点(1)掌握Manifest文件的结构。(2)掌握更新缓存的方法。教学方法任务驱动法、分组讨论法、理论实践一体化、讲练结合课时建议4课时【教学任务】4.3.1 任务描述创建一个使用缓存功能的页面，该页面中的demo.css、demo.jg demo.js都将被缓存，而demo2.css不缓存。将该页面配置到服务器上，使用开启ApplicationCache功能的浏览器访问页面，同时

10、打开开发者工具查看控制台信息，效果如图4.12 (1)、4.12 (2)所示。然后尝试更新页面缓存：第一步，修改demo.js文件，写入一个alert(update)语句。第二步，更新Manifest文件，改变版本号。第三步，点击“更新缓存Manifest文件”按钮第四步，刷新页面，可看到页面更新了缓存的demo.js文件，弹出警告框。如图4.12 (3)所示。口 loClhotr8081ApplicationC.0 Q Iocalhost 8081/ApplicationC heApplicationCache.htm图4.12 (3)重新刷新页面效果图Elements Console So

11、urces Network Performance Memory Application Security Auditshtml ni mStyles Computed Event Listeners body . /body - $tmlhtml bodyI Filter:hov . ciselement. style (Console(E 0 topFilterDefault levels Group similar12c4t2onCuh2DlAc0ton.mani ADDli0taonCch.hfu 1fetApplicationApplicationApplicationApplica

12、tionApplicationApplicationApplicationCacheCacheCacheCacheCacheCacheCacheChecking eventDov/nloading eventProgressProgressProgressProgressevent ( ofevent (1 ofevent 2 ofevent (3 ofCached eventAllArq11cat fonCac，忙.htm:1cat fonC&cht.htm:13)3)3)3)hts：lxalhost :8081/ADDllcarlonCache/d2mo 1$ht8： lxalhost: 8081/Addhttp：loqlhGt:8081/AddteatAdlon(achedmo.lon(achedgffo , 1t)Add】，cat loMache htm: 1Appliuat: ionCduhe. htm: 1Type SizeStorage Local Storage Session StorageS IndexedDB Web SQL 曲 CookiesCache至 Cache Storage Application Cacheapp