河南中医药大学：《Web交互开发》实验指导_10.实验十：本地存储[JH-2018版]

《Web交互开发》实验教学指导/实验十:本地存储 《Web交互开发》实验教学指导 实验十:本地存储 、实验目的(5分) 1、了解本地存储的概念和作用 2、掌握 Web Storage存储的方法; 3、掌握 IndexedDB存储数据的方法 4、掌握 Cookie存储数据的方法 二、实验环境(5分) 1、 Windows XP/ Windows7操作系统的计算机 2、局域网网络环境,并且使用固定IP地址。 三、实验要求(5分) 1、实现简单留言版的管理; 2、 indexedDB数据库的基本操作 四、实验原理(5分) 1、 Web Storge存储原理; 2、 IndexedDB存储数据原理 3、 Cookie数据存储原理。 五、实验步骤(40分) 1、简单留言板 (1)使用 Web Storge实现简单留言板的管理,如图10-1所示。点击保存留言实现留言保 存,读取留言能够显示留言,淸除留言能够将本地存储的留言全部清除。 简单Web留言板 保存留言读取留言清除留言 图10-1简单留言板的管理 (3)请完成以下任务 任务一:实现上述留言板功能。(10分) 要求 本讲共计3页当前第1页

《Web 交互开发》实验教学指导 / 实验十 ：本地存储 本讲共计 3 页 | 当前第 1 页 《Web 交互开发》实验教学指导 实验十：本地存储 一、实验目的（5 分） 1、了解本地存储的概念和作用； 2、掌握 Web Storage 存储的方法； 3、掌握 IndexedDB 存储数据的方法； 4、掌握 Cookie 存储数据的方法； 二、实验环境（5 分） 1、Windows XP/Windows 7 操作系统的计算机； 2、局域网网络环境，并且使用固定 IP 地址。 三、实验要求（5 分） 1、实现简单留言版的管理； 2、indexedDB 数据库的基本操作； 四、实验原理（5 分） 1、Web Storge 存储原理； 2、IndexedDB 存储数据原理； 3、Cookie 数据存储原理。 五、实验步骤（40 分） 1、简单留言板 （1）使用 Web Storge 实现简单留言板的管理，如图 10-1 所示。点击保存留言实现留言保 存，读取留言能够显示留言，清除留言能够将本地存储的留言全部清除。 （3）请完成以下任务： 任务一：实现上述留言板功能。（10 分） 要求： 图 10-1 简单留言板的管理

《Web交互开发》实验教学指导/实验十:本地存储 请将上述任务的操作方法,填写到实验报告册中。 2、 indexedDB数据库的使用 (1) indexedDB数据库基本操作如图10-2 连接数据库」创建对象仓库〖保存数据」[读取数据 图10-2 indexedDB数据库基本使用 (2)请完成下面的任务: 任务一:编写如上图所示的数据库,并能够保存数据,读取数据。(20分) 要求 请将上述任务的操作方法,填写到实验报告册中 六、自主实验步骤(20分) 1、使用 JavaScript与 indexedDB相结合,开发一个本地留言板 简单留言板 用户名:张 今天是个好天气 留言内容 提交留言刪除留言 留言列表 张三说:今天是个好天气 图10-3本地留言板 (1)完成下述任务。 任务一:完成留言板页面的编写。(5分) 任务二:完成数据库的创建。(5分) 任务三:完成数据的录入(5分) 任务四:完成数据的显示。(5分) 要求 请将完成上述任务的步骤,填写到实验报告册中。 七、思考及问答(20分) 本讲共计3页|当前第2页

《Web 交互开发》实验教学指导 / 实验十 ：本地存储 本讲共计 3 页 | 当前第 2 页 请将上述任务的操作方法，填写到实验报告册中。 2、indexedDB 数据库的使用 （1）indexedDB 数据库基本操作如图 10-2 （2）请完成下面的任务： 任务一：编写如上图所示的数据库，并能够保存数据，读取数据。（20 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 六、自主实验步骤（20 分） 1、使用 JavaScript 与 indexedDB 相结合，开发一个本地留言板。 图 10-3 本地留言板 （1）完成下述任务。 任务一：完成留言板页面的编写。（5 分） 任务二：完成数据库的创建。（5 分） 任务三：完成数据的录入（5 分） 任务四：完成数据的显示。（5 分） 要求： 请将完成上述任务的步骤，填写到实验报告册中。 七、思考及问答（20 分） 图 10-2 indexedDB 数据库基本使用

《Web交互开发》实验教学指导/实验十:本地存储 1、 session Storge与 localStorge的区别是什么?(4分) 2、什么是 indexedDB数据库?(4分) 3、 Storge对象带有的属性和方法有哪些?(4分) 4、描述 Cookie的工作原理?(4分) Cookie的应用场景有哪些?(4分) 本讲共计3页|当前第3页

《Web 交互开发》实验教学指导 / 实验十 ：本地存储 本讲共计 3 页 | 当前第 3 页 1、sessionStorge 与 localStorge 的区别是什么？（4 分） 2、什么是 indexedDB 数据库？（4 分） 3、Storge 对象带有的属性和方法有哪些？（4 分） 4、描述 Cookie 的工作原理？（4 分） 5、Cookie 的应用场景有哪些？（4 分）