在HTML5之前，主要是使用cookies存储，cookies的缺点有：需要在请求头上带着数据，存储大小在4k之内。

HTML5支持两种的WebStorage，一种是永久性的本地存储（localStorage），另外一种是会话级别的本地存（sessionStorage）。存储数据量上可以达到5M，但他们两个都只能提供存储简单数据结构的数据。 

【 案例展示 】

学习任务

重点、难点

突破方法

1. Web Storage存取实现。

2. Web Storage永久保存。

1.  Web Storage存取实现。

2. 教学难点：Web Storage永久保存。

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

知识目标

能力目标

素质目标

1.掌握API进行存取实现。

2.掌握Web Storage永久保存。

1.能够熟练进行本地存储实现。

2.能进行Web Storage永久保存。

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

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

3. 培养团队合作能力。

课程思政——网络安全

【 视频讲解】

知识储备及案例实现

1、Web Storage存取实现1

2、Web Storage存取实现2

3、Web Storage不同存储区别

4、Web Storage永久保存案例1

5、Web Storage永久保存案例2

【 资料下载 】

单元设计

Web Storage

课程教案

Web Storage

演示文稿

Web Storage

任务工单

Web Storage

案例源码下载

     本地存储

课内同步项目

   复古个性插画设计师作品展示html5.rar 

课外扩展项目

    响应式扁平可爱插画风格网站.rar 

练习题

 1、练习1

疑难问题解答

1、H5如何实现本地存储？