《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 简单留言板的管理
《Web交互开发》实验教学指导/实验七:本地存储 简单web留言板 简单Web留言板 function save Storage(id) var data=document. get Element Byld (id).value, var time=new Date(get Timeo localStorage. setltem(time, data) alert("数据已保存!"), > (3)请完成以下任务 任务一:实现读取留言功能。(5分) 任务二:实现清除留言功能(5分) 任务三: storge对象带有的方法与属性有哪些。(5分) 要求: 请将上述任务的操作方法,填写到实验报告册中。 2、 indexedDB数据库的使用 (1) indexed数据库基本操作如图7-2 连接数据库]「创建对象仓库「保存数据读取数据 图7-2 indexedDB数据库基本使用 本讲共计5页|当前第2页
《Web 交互开发》实验教学指导 / 实验七 ：本地存储 本讲共计 5 页 | 当前第 2 页 简单 web 留言板 简单 Web 留言板 function saveStorage(id){ var data=document.getElementById(id).value; var time=new Date().getTime(); localStorage.setItem(time,data); alert("数据已保存！"); } （3）请完成以下任务： 任务一：实现读取留言功能。（5 分） 任务二：实现清除留言功能（5 分） 任务三：storge 对象带有的方法与属性有哪些。（5 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 2、indexedDB 数据库的使用 （1）indexedDB 数据库基本操作如图 7-2 图 7-2 indexedDB 数据库基本使用
《Web交互开发》实验教学指导/实验七:本地存储 (2)部分如下所示: indexedDB数据库的使用 Input type=" button" value="读取数据"> ∥连接数据库 function connectDatabaseot var dbName='indexedDBTest var dbConnect=indexedDB. open(dbName, db Version) db. onsuccess=function(e)( lrt("数据库连接成功"), onerror-function(i alert("数据库连接失败"), (3)请完成下面的任务 任务一:编写相应的代码,在数据库中创建数据仓库对象。(5分) 任务二:编写代码,在数据库中添加数据?(5分) 任务三:简述 indexedDB数据库的特点。(5分) 要求 请将上述任务的操作方法,填写到实验报告册中。 本讲共计5页|当前第3页
《Web 交互开发》实验教学指导 / 实验七 ：本地存储 本讲共计 5 页 | 当前第 3 页 （2）部分如下所示： indexedDB 数据库的使用 //连接数据库 function connectDatabase(){ var dbName='indexedDBTest2'; var dbVersion=20171130; var idb; var dbConnect=indexedDB.open(dbName,dbVersion); dbConnect.onsuccess=function(e){ idb=e.target.result; alert("数据库连接成功"); } dbConnect.onerror=function(){ alert("数据库连接失败"); } } （3）请完成下面的任务： 任务一：编写相应的代码，在数据库中创建数据仓库对象。（5 分） 任务二：编写代码，在数据库中添加数据？（5 分） 任务三：简述 indexedDB 数据库的特点。（5 分） 要求： 请将上述任务的操作方法，填写到实验报告册中
Nb交互开发》实验教学指导/实验七:本地存储4 3、使用 cookie完成页面重定向问题 (1)限制页面在一天只能被加载一次的情况。打开情况如图7-3-1与7-3-2所示。 自网页的消息 页面重定向x ce∥D)☆≡‖ 页面已经被加载过 本页面是重定向页面 图7-3-1创建文件 图7-3-2页面己加载过 (2)部分代码如下所示 function cookietestOt var cookiedate=new Date cookiedate. setDate(cookiedate. getDate(-+1); alert("页面已经被加载过") document. cookie=test=test expires="+cookiedate toUTCStringO window location href"index2. html (3)请完成下面的任务 任务一:描述该功能的实现原理(3分)。 任务二:描述 Cookie的工作流程?(2分) 任务三:描述 Cookie的常用属性?(3分) 任务四:使用 Cookie存在哪些问题。(2分) 要求: 请将上述任务的操作方法,填写到实验报告册中。 六、自主实验步骤(20分) 1、使用 JavaScript与 indexed DB相结合,开发一个本地留言板 (1)完成下述任务。 任务一:完成留言板页面的编写。(5分) 任务二:完成数据库的创建。(5分) 任务三:完成数据的录入(5分) 任务四:完成数据的显示。(5分 本讲共计5页当前第4页
《Web 交互开发》实验教学指导 / 实验七 ：本地存储 本讲共计 5 页 | 当前第 4 页 3、使用 cookie 完成页面重定向问题 （1）限制页面在一天只能被加载一次的情况。打开情况如图 7-3-1 与 7-3-2 所示。 （2）部分代码如下所示： function cookietest(){ var cookiedate=new Date(); cookiedate.setDate(cookiedate.getDate()+1); if(document.cookie.length!=0){ alert("页面已经被加载过"); } else{ document.cookie="test=test;expires="+cookiedate.toUTCString(); window.location.href="index2.html"; } } （3）请完成下面的任务： 任务一：描述该功能的实现原理（3 分）。 任务二：描述 Cookie 的工作流程？（2 分） 任务三：描述 Cookie 的常用属性？（3 分） 任务四：使用 Cookie 存在哪些问题。（2 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 六、自主实验步骤（20 分） 1、使用 JavaScript 与 indexedDB 相结合，开发一个本地留言板。 （1）完成下述任务。 任务一：完成留言板页面的编写。（5 分） 任务二：完成数据库的创建。（5 分） 任务三：完成数据的录入（5 分） 任务四：完成数据的显示。（5 分） 图 7-3-1 创建文件 图 7-3-2 页面已加载过
《Web交互开发》实验教学指导/实验七:本地存储 要求: 请将完成上述任务的步骤,填写到实验报告册中。 七、思考及问答(20分) 1、 session Storge与 localStorge的区别是什么?(5分) 2、什么是 indexedDB数据库?(5分) 3、简单描述如何使用 indexedDB数据库?(5分) 4、 Cookie的应用场景有哪些?(5分) 本讲共计5页|当前第5页
《Web 交互开发》实验教学指导 / 实验七 ：本地存储 本讲共计 5 页 | 当前第 5 页 要求： 请将完成上述任务的步骤，填写到实验报告册中。 七、思考及问答（20 分） 1、sessionStorge 与 localStorge 的区别是什么？（5 分） 2、什么是 indexedDB 数据库？（5 分） 3、简单描述如何使用 indexedDB 数据库？（5 分） 4、Cookie 的应用场景有哪些？（5 分）