正在加载图片...
《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 数据库基本使用