KC014050000007单元设计_单元7HTML5Web存储.docVIP

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