《JavaScript程序设计案例教程》教案 第10章 浏览器存储.docx

PAGE6

PAGE6

PAGE7

PAGE7

课题

浏览器存储

课时

4课时（180min）

教学目标

知识目标：

（1）掌握Cookie的常见用法

（2）掌握sessionStorage的常见用法

（3）掌握localStorage的常见用法

能力目标：

（1）掌握Cookie的读写及常用属性设置

（2）运用sessionStorage和localStorage进行本地存储

（3）实现利用localStorage存储请求数据以提升用户体验

素质目标：

（1） 增强网络安全意识，养成良好的职业习惯

（2）心系国家建设，坚持以人民为中心，强化民族意识

（3）树立正确的网络安全观，提高在信息化发展中的幸福感、安全感

教学重难点

教学重点：掌握Cookie的读写及常用属性设置；熟练运用sessionStorage和localStorage进行本地存储；利用localStorage存储请求数据提升用户体验；运用sessionStorage实现跨页表单提交，提升对这些存储方式的综合运用能力

教学难点：准确理解和设置Cookie的各种常用属性；区分sessionStorage和localStorage的特性及使用场景，在实际开发中合理选择；高效运用它们存储数据并处理跨页表单提交时的数据组合与传递

教学方法

问答法、讨论法、讲授法

教学用具

电脑、投影仪、多媒体课件、教材

教学过程

主要教学内容及步骤

课前任务

【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务

请同学们在课前打开自己常用的浏览器，找到浏览器设置中的“隐私设置”或“Cookie设置”等相关选项，观察当前浏览器对Cookie的处理方式，包括是否接受Cookie、是否自动清除Cookie等，并记录下来，然后在APP上进行讨论。

【学生】完成课前任务

考勤

【教师】使用APP进行签到

【学生】班干部报请假人员及原因

问题导入

【教师】提出以下问题：

同学们在上网过程中，有时候关闭了一个网站，过了一段时间再打开，发现自己上次的登录状态还在，不用重新登录；而有时候却需要重新登录。这是为什么呢？

【学生】思考、举手回答

传授新知

【教师】通过学生的回答，引入新知，讲解Cookie的基本用法，Cookie常用属性，用于存储本地数据的sessionStorage和localStorage等知识

10.1Cookie

?【教师】扫码播放“Cookie”微课，帮助学生了解Cookie的基本用法，Cookie的常用属性

Cookie原意为饼干、小甜饼的意思，在Web开发中表示一种小型文本文件存储功能，有时也指某些网站为辨别用户身份、进行会话（session）跟踪而储存在客户端的数据。当用户通过浏览器向服务器端发出数据请求时，服务器为了记录该用户的状态，会在响应头中通过Set-Cookie字段发送一段数据，浏览器将该数据保存起来，当该用户再次请求该网站时，浏览器会将Cookie数据放入请求头中的Cookie字段中，服务器收到请求即可辨认用户状态。

10.1.1基本用法

Cookie是一种浏览器和服务器都能读写的数据存储方式，开发者可以同时从浏览器端和服务器端读取和设置Cookie。

浏览器提供了document.cookie属性进行Cookie的读写，使用document.cookie可以直接读取当前网页的Cookie。对document.cookie赋值可以设置Cookie的属性，Cookie属性值设置是采用“key=value”键值对的格式。形式如下：

//设置Cookie的name属性为tim

document.cookie=name=tim;

值得注意的是，Cookie每次只能设置一个属性值，对于同一个key来说，多次设置仅最后一次设置生效。

服务器端的Cookie读写主要是通过请求头和响应头来实现。请求头能够读取浏览器当前URL对应的Cookie数据，服务器端通过Set-Cookie响应头设置对应Cookie数据。代码如下：

//读取Cookie

req.headers.cookie;

//设置Cookie

res.setHeader(Set-Cookie,[uid=100,name=hello]);

上述代码，读取Cookie使用req.headers.cookie属性，返回的Cookie是一个字符串格式数据，以“;”分隔。设置Cookie使用res.setHeader()方法，第一个参数传入字符串Set-Cookie，第二个参数支持传入一个字符串，也支持传入一个数组。多个Cookie设置使用数组形式，同样使用“key=value”键值对形