搜索
《HTML5程序设计》课程教学单元设计山东电子职业技术学院第1页共5页《HTML5程序设计》课程教学单元设计单元7HTML5Web存储授课教师：HTML5课程组授课班级:学时：6教学条件实训室、HBilder或Dreamweaver、投影设备、广播软件、互联网络教学素材教材、课件、授课录像、案例库、教学网站等教学目标设计知识目标：(1)掌握WebStorage的基本概念，了解WebStorage与Cookie的区别；(2)了解sessionStorage和localStorage，以及两者之间的区别；(3)掌握sessionStorage和localStorage的使用方法，能够使用这两者进行复杂数据的存储；(4)掌握本地数据库的基本概念；(5)掌握本地数据库的创建与打开及增、删、查、改方法；能力目标：(1)能熟练使用sessionStorage对象进行数据的存储和获取；(2)能熟练使用localStorage对象进行数据的存储和获取；(3)熟练使用WebStorage的事件监测机制获取相关的属性值；(4)熟练使用本地数据库的方法，进行本地数据库的创建、打开及增删改查。引例描述（1）有了cookie本地存储，为什么还要引入WebStorage的概念？（2）频繁地访问数据库服务器获取数据，不但会增加网络流量，而且影响应用程序的效率，对于轻型数据如何能避免这种情况？教学内容（1）认识WebStorage；（2）使用WebStorage；（3）WebSQL数据库；（4）Web存储应用实例。重点：（1）sessionStorage和localStorage的使用方法；（2）HTML5本地数据库的创建与打开及增、删、查、改方法。难点：（1）sessionStorage和localStorage的使用方法；（2）HTML5本地数据库的创建与打开及增、删、查、改方法。引例分析与实现（1）引例分析；（2）引例代码。《HTML5程序设计》课程教学单元设计山东电子职业技术学院第2页共5页教学过程设计7.1认识WebStorage（学时数：1）主要步骤教学内容教学方法教学手段师生活动问题引入Cookie是如何存储本地数据的？什么是Web本地存储？Web存储和Cookie有什么区别？教师讲授引导文法多媒体教师：讲解演示学生：观察思考知识讲解知识点1：早期的本地存储；知识点2：HTML5规范的本地存储；知识点3：WebStorage与Cookie的区别。启发讲解讨论归纳多媒体课件演示思考交流互动分组讨论记录笔记示范操作操作1：演示Cookie中存储本地数据操作2：简单WebStorage存储演示问题引导操作演示分析归纳多媒体系统演示观摩思考归纳总结实战训练课堂实践1-1：模仿课堂示范操作1，进行Cookie本地数据的存储，了解Cookie存储的缺点。动手实践做中学多媒体真实系统环境网络资源实践操作查阅资料巡视指导评估讨论（1）评估讨论实训任务的实施过程；（2）给出参考的解决方案；（3）展示讨论学生的解决方案；（4）考核学生结果。教师启发讨论归纳分数激励实训项目单思考结果演示课堂总结（1）早期的本地存储；（2）HTML5规范的本地存储；（3）WebStorage与Cookie的区别。教师讲解多媒体课件演示整理笔记引导创新课后作业仿照课堂内容实现页面顶端显示页面的访问次数。教师讲授多媒体布置作业提出要求《HTML5程序设计》课程教学单元设计山东电子职业技术学院第3页共5页教学过程设计7.2使用WebStorage（学时数：2）主要步骤教学内容教学方法教学手段师生活动问题引入在HTM5中，如何通过Web本地存储进行数据的存储？教师讲授引导文法多媒体教师：讲解演示学生：观察思考知识讲解知识点1：localStorage对象知识点2：sessionStorage对象知识点3：WebStorage事件监测知识点2：使用JSON对象存取数据启发讲解讨论归纳多媒体课件演示思考交流互动分组讨论记录笔记示范操作操作：教师介绍localStorage对象和sessionStorage对象的属性、方法和事件，并进行演示。问题引导操作演示分析归纳多媒体系统演示观摩思考归纳总结实战训练模仿老师演示，实现localStorage对象和sessionStorage对象的属性、方法和事件操作。动手实践做中学多媒体真实系统环境网络资源实践操作查阅资料巡视指导评估讨论（1）评估讨论实训任务的实施过程；（2）给出参考的解决方案；（3）展示讨论学生的解决方案；（4）考核学生结果。教师启发讨论归纳分数激励实训项目单思考结果演示课堂总结（1）localStorage对象及其使用（2）sessionStorage对象及其使用（3）WebStorage事件监测的方法（4）使用JSON对象存取数据的处理教师讲解多媒体课件演示整理笔记引导创新课后作业完成一个带有localStorage对象及JSON对象存储数据的例子。教师讲授多媒体布置作业提出要求《HTML5程序设计》课程教学单元设计山东电子职业技术学院第4页共5页教学过程设计7.3WebSQL数据库（学时数：2）主要步骤教学内容教学方法教学手段师生活动问题引入什么是Web数据库？和服务器端的数据库有什么区别，如何进行操作？教师讲授引导文法多媒体教师：讲解演示学生：观察思考知识讲解知识点1：WebSQL数据库概述。知识点2：使用WebSQL数据库。启发讲解讨论归纳多媒体课件演示思考交流互动分组讨论记录笔记示范操作操作：演示本地数据库的创建与打开及增、删、查、改的方法操作。问题引导操作演示分析归纳多媒体系统演示观摩思考归纳总结实战训练模仿教师的课堂演示，动手完成一个典型数据库的创建与打开及增、删、查、改的方法操作。动手实践做中学多媒体真实系统环境网络资源实践操作查阅资料巡视指导评估讨论（1）评估讨论实训任务的实施过程；（2）给出参考的解决方案；（3）展示讨论学生的解决方案；（4）考核学生结果。教师启发讨论归纳分数激励实训项目单思考结果演示课堂总结（1）表单的创建，新增表单属性的设置。（2）新增表单元素及输入表单的常用类型。（3）表单的自动验证及自定义验证。教师讲解多媒体课件演示整理笔记引导创新课后作业（1）独立完成一个典型数据库的创建与打开及增、删、查、改的方法操作教师讲授多媒体布置作业提出要求《HTML5程序设计》课程教学单元设计山东电子职业技术学院第5页共5页教学过程设计7.4Web存储应用实例（学时数：1）主要步骤教学内容教学方法教学手段师生活动问题引入如何通过Web存储技术设计一个简单的留言板？如何将Web存储用做一个简易数据库？教师讲授引导文法多媒体教师：讲解演示学生：观察思考知识讲解知识点1：制作简单留言板；知识点2：Web存储作为简易数据库来使用；启发讲解讨论归纳多媒体课件演示思考交流互动分组讨论记录笔记示范操作操作：1.制作简单留言板；2.Web存储作为简易数据库来使用；问题引导操作演示分析归纳多媒体系统演示观摩思考归纳总结实战训练模仿教师的课堂演示，动手完成课堂示例；动手实践做中学多媒体真实系统环境网络资源实践操作查阅资料巡视指导评估讨论（1）评估讨论实训任务的实施过程；（2）给出参考的解决方案；（3）展示讨论学生的解决方案；（4）考核学生结果。教师启发讨论归纳分数激励实训项目单思考结果演示课堂总结（1）LocalStorage或sessionStorage的存储与获取。（2）JSON数据的存储与获取；教师讲解多媒体课件演示整理笔记引导创新课后作业继续完善课堂示例，通过WebSQL制作简单的留言板。教师讲授多媒体布置作业提出要求