《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交互开发》实验教学指导/实验七:本地存储 <head> <ttle>简单web留言板<tite <meta charset=UTF-8"> <meta name=viewport"content="width=device-width, initial-scale=1.0"> <h>简单Web留言板<hl> <textarea id="memo"cols=60"rows="10"></textarea><br> < -input type=" button" value="保存留言" onclick=" save Storage(memo)"> < Input type=" button" value="读取留言"> < Input type=" button"vaue="清除留言"> <hr> function save Storage(id) var data=document. get Element Byld (id).value, var time=new Date(get Timeo localStorage. setltem(time, data) alert("数据已保存!"), </body>> </html> (3)请完成以下任务 任务一:实现读取留言功能。(5分) 任务二:实现清除留言功能(5分) 任务三: storge对象带有的方法与属性有哪些。(5分) 要求: 请将上述任务的操作方法,填写到实验报告册中。 2、 indexedDB数据库的使用 (1) indexed数据库基本操作如图7-2 连接数据库]「创建对象仓库「保存数据读取数据 图7-2 indexedDB数据库基本使用 本讲共计5页|当前第2页
《Web 交互开发》实验教学指导 / 实验七 ：本地存储 本讲共计 5 页 | 当前第 2 页 <html> <head> <title>简单 web 留言板</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h1>简单 Web 留言板</h1> <textarea id="memo" cols="60" rows="10"></textarea><br> <input type="button" value="保存留言" onclick="saveStorage('memo')"> <input type="button" value="读取留言"> <input type="button" value="清除留言"> <hr> <p id="msg"></p> <script> function saveStorage(id){ var data=document.getElementById(id).value; var time=new Date().getTime(); localStorage.setItem(time,data); alert("数据已保存！"); } </script> </body> </html> （3）请完成以下任务： 任务一：实现读取留言功能。（5 分） 任务二：实现清除留言功能（5 分） 任务三：storge 对象带有的方法与属性有哪些。（5 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 2、indexedDB 数据库的使用 （1）indexedDB 数据库基本操作如图 7-2 图 7-2 indexedDB 数据库基本使用
《Web交互开发》实验教学指导/实验七:本地存储 (2)部分如下所示: < title>indexedDB数据库的使用</ttle <meta charset=UTF-8"> <meta name="viewport" content="width-device-width, initial-scale=1.0"> < -input type=" button" value="连接数据库" onclick=" connectDatabase("> < -input type=" button" value="创建对象仓库"> < -input type=" button" value="保存数据"> 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）部分如下所示： <html> <head> <title>indexedDB 数据库的使用</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <input type="button" value="连接数据库" onclick="connectDatabase()"> <input type="button" value="创建对象仓库"> <input type="button" value="保存数据"> <input type="button" value="读取数据"> <script> //连接数据库 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)部分代码如下所示 <script language="javascript"> function cookietestOt var cookiedate=new Date cookiedate. setDate(cookiedate. getDate(-+1); alert("页面已经被加载过") document. cookie=test=test expires="+cookiedate toUTCStringO window location href"index2. html </script> (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）部分代码如下所示： <script language="javascript"> 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"; } } </script> （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 分）