KC014050000007单元设计单元7HTML5Web存储(共5页).doc

《KC014050000007单元设计单元7HTML5Web存储(共5页).doc》由会员分享，可在线阅读，更多相关《KC014050000007单元设计单元7HTML5Web存储(共5页).doc（5页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、精选优质文档-倾情为你奉上HTML5程序设计课程教学单元设计单元7 HTML5 Web存储授课教师：HTML5课程组授课班级:学时：6教学条件实训室、HBilder或Dreamweaver、投影设备、广播软件、互联网络教学素材教材、课件、授课录像、案例库、教学网站等教学目标设计知识目标：(1) 掌握Web Storage的基本概念，了解Web Storage与Cookie的区别；(2) 了解sessionStorage和localStorage，以及两者之间的区别；(3) 掌握sessionStorage和localStorage的使用方法，能够使用这两者进行复杂数据的存储；(4) 掌握本地数

2、据库的基本概念；(5) 掌握本地数据库的创建与打开及增、删、查、改方法；能力目标：(1) 能熟练使用sessionStorage对象进行数据的存储和获取；(2) 能熟练使用localStorage对象进行数据的存储和获取；(3) 熟练使用Web Storage的事件监测机制获取相关的属性值；(4) 熟练使用本地数据库的方法，进行本地数据库的创建、打开及增删改查。引例描述（1） 有了cookie本地存储，为什么还要引入WebStorage的概念？（2） 频繁地访问数据库服务器获取数据，不但会增加网络流量，而且影响应用程序的效率，对于轻型数据如何能避免这种情况？教学内容（1）认识Web Stora

3、ge；（2）使用Web Storage；（3）Web SQL数据库；（4）Web存储应用实例。重点：（1）sessionStorage和localStorage的使用方法；（2）HTML5本地数据库的创建与打开及增、删、查、改方法。难点：（1）sessionStorage和localStorage的使用方法；（2）HTML5本地数据库的创建与打开及增、删、查、改方法。引例分析与实现（1）引例分析；（2）引例代码。教学过程设计7.1 认识Web Storage（学时数：1）主要步骤教学内容教学方法教学手段师生活动问题 引入Cookie是如何存储本地数据的？什么是Web本地存储？Web存储和Coo

4、kie有什么区别？教师讲授引导文法多媒体教师：讲解演示学生：观察思考知识讲解知识点1：早期的本地存储；知识点2：HTML5规范的本地存储；知识点3：Web Storage与Cookie的区别。启发讲解讨论归纳多媒体课件演示思考交流互动分组讨论记录笔记示范 操作操作1：演示Cookie中存储本地数据操作2：简单Web Storage存储演示问题引导操作演示分析归纳多媒体系统演示观摩思考归纳总结实战 训练课堂实践1-1：模仿课堂示范操作1，进行Cookie本地数据的存储，了解Cookie存储的缺点。动手实践做中学多媒体真实系统环境网络资源实践操作查阅资料巡视指导评估讨论（1）评估讨论实训任务的实施

5、过程；（2）给出参考的解决方案；（3）展示讨论学生的解决方案；（4）考核学生结果。教师启发讨论归纳分数激励实训项目单思考结果演示课堂总结（1） 早期的本地存储；（2） HTML5规范的本地存储；（3） Web Storage与Cookie的区别。教师讲解多媒体课件演示整理笔记引导创新课后作业仿照课堂内容实现页面顶端显示页面的访问次数。教师讲授多媒体布置作业提出要求教学过程设计7.2 使用Web Storage（学时数：2）主要步骤教学内容教学方法教学手段师生活动问题 引入在HTM5中，如何通过Web本地存储进行数据的存储？教师讲授引导文法多媒体教师：讲解演示学生：观察思考知识讲解知识点1： l

6、ocalStorage对象知识点2： sessionStorage对象知识点3： Web Storage事件监测知识点2： 使用JSON对象存取数据启发讲解讨论归纳多媒体课件演示思考交流互动分组讨论记录笔记示范 操作操作：教师介绍localStorage对象和sessionStorage对象的属性、方法和事件，并进行演示。问题引导操作演示分析归纳多媒体系统演示观摩思考归纳总结实战 训练模仿老师演示，实现localStorage对象和sessionStorage对象的属性、方法和事件操作。动手实践做中学多媒体真实系统环境网络资源实践操作查阅资料巡视指导评估讨论（1）评估讨论实训任务的实施过程；（

7、2）给出参考的解决方案；（3）展示讨论学生的解决方案；（4）考核学生结果。教师启发讨论归纳分数激励实训项目单思考结果演示课堂总结（1） localStorage对象及其使用（2）sessionStorage对象及其使用（3） Web Storage事件监测的方法（4） 使用JSON对象存取数据的处理教师讲解多媒体课件演示整理笔记引导创新课后作业完成一个带有localStorage对象及JSON对象存储数据的例子。教师讲授多媒体布置作业提出要求教学过程设计7.3 Web SQL数据库（学时数：2）主要步骤教学内容教学方法教学手段师生活动问题 引入什么是Web数据库？和服务器端的数据库有什么区别，

8、如何进行操作？教师讲授引导文法多媒体教师：讲解演示学生：观察思考知识讲解知识点1：Web SQL数据库概述。知识点2：使用Web SQL数据库。启发讲解讨论归纳多媒体课件演示思考交流互动分组讨论记录笔记示范 操作操作：演示本地数据库的创建与打开及增、删、查、改的方法操作。问题引导操作演示分析归纳多媒体系统演示观摩思考归纳总结实战 训练模仿教师的课堂演示，动手完成一个典型数据库的创建与打开及增、删、查、改的方法操作。动手实践做中学多媒体真实系统环境网络资源实践操作查阅资料巡视指导评估讨论（1）评估讨论实训任务的实施过程；（2）给出参考的解决方案；（3）展示讨论学生的解决方案；（4）考核学生结果。

9、教师启发讨论归纳分数激励实训项目单思考结果演示课堂总结（1）表单的创建，新增表单属性的设置。（2）新增表单元素及输入表单的常用类型。（3）表单的自动验证及自定义验证。教师讲解多媒体课件演示整理笔记引导创新课后作业（1）独立完成一个典型数据库的创建与打开及增、删、查、改的方法操作教师讲授多媒体布置作业提出要求教学过程设计7.4 Web存储应用实例（学时数：1）主要步骤教学内容教学方法教学手段师生活动问题 引入如何通过Web存储技术设计一个简单的留言板？如何将Web存储用做一个简易 数据库？教师讲授引导文法多媒体教师：讲解演示学生：观察思考知识讲解知识点1：制作简单留言板；知识点2：Web存储作为

10、简易数据库来使用；启发讲解讨论归纳多媒体课件演示思考交流互动分组讨论记录笔记示范 操作操作：1.制作简单留言板；2.Web存储作为简易数据库来使用；问题引导操作演示分析归纳多媒体系统演示观摩思考归纳总结实战 训练模仿教师的课堂演示，动手完成课堂示例；动手实践做中学多媒体真实系统环境网络资源实践操作查阅资料巡视指导评估讨论（1）评估讨论实训任务的实施过程；（2）给出参考的解决方案；（3）展示讨论学生的解决方案；（4）考核学生结果。教师启发讨论归纳分数激励实训项目单思考结果演示课堂总结（1） LocalStorage或sessionStorage的存储与获取。（2）JSON数据的存储与获取；教师讲解多媒体课件演示整理笔记引导创新课后作业继续完善课堂示例，通过WebSQL制作简单的留言板。教师讲授多媒体布置作业提出要求专心-专注-专业