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