虽然Html5已经提供了功能强大的localStorage和sessionStorage，但是他们两个都只能提供存储简单数据结构的数据，对于复杂的Web应用的数据却无能为力。

       Html5提供了一个浏览器端的数据库支持，允许我们直接通JS的API在浏览器端创建一个本地的数据库，而且支持标准的SQL的CRUD操作，让离线的Web应用更加方便的存储结构化的数据。

【 案例展示】

学习任务

重点、难点

突破方法

1. 数据库的创建。

2. 表的创建。

3. 数据的增删改查。

1. 数据库及数据表的创建。

2. 教学难点：数据的增删改查。

采用翻转课堂、项目导入的教学模式，采用分组讨论、案例教学、演示动画等教学方法，运用在线教学平台。

知识目标

能力目标

素质目标

1.掌握数据库、数据表的创建。

2.掌握表中数据的增删改查。

1.能够熟练进行数据库及数据表的创建。

2.能熟练进行表中数据的增删改查。。

1. 养成积极主动学习意识；

2. 养成勤于动手的习惯；

3. 培养团队合作能力。

课程思政——不放弃梦想

【 视频讲解】

知识储备及案例实现

1、数据库的创建1

2、数据库的创建2

3、数据库中表的创建

4、表中数据的增删改查1

5、表中数据的增删改查2

【 资料下载 】

单元设计

Web SQL数据库

课程教案

Web SQL数据库

演示文稿

Web SQL数据库

任务工单

Web SQL数据库

素材下载

复杂数据存储

课内同步项目

浅红色扁平化互联网产品企业整站.rar   

课外扩展项目

蓝色宽屏响应式太阳眼镜网上商城整站.rar  

练习题

 1、练习1

疑难问题解答

1、H5实现本地存储的优缺点。