利用Web Storage制作简单的网页留言板

友情提示：

关于Web Storage本地存储功能的详细介绍，详见链接：http://blog.csdn.net/lixiuxiu2017/article/details/79592091，这里不再赘述

利用Web Storage制作简单的网页留言板，需要自定义三个函数，分别实现不同的功能：

（1）saveData()：将留言板中输入的内容保存到localStorage对象中。首先利用new Date().getTime()获取留言时间表示的毫秒数，然后使用localStorage.setItem(‘key’,’value’)将留言板中的数据作为键值，将毫秒数作为键名保存下来

（2）readData()：取得保存后的所有数据，然后以表格的形式进行显示。利用localStorage的两个重要属性：localStorage.length表示保存在localStorage对象中的所有键值对的数目，localStorage.key(index)取得index索引号对应的键名

（3）clearData()：将保存在localStorage对象中的数据全部删除。利用localStorage.clear()方法，具体实现demo如下：

index.html文件中的代码如下：

        

        

        

简单的网页留言板

---

liuyanban.js文件中的代码如下：

//把留言板区域输入的数据保存到本地磁盘上

functionsaveData(id){

         //获取留言内容数据

         var target=document.getElementById(id);

         var str=target.value;

         //获取当前日期的毫秒数,将留言时间保存下来

         var time=new Date().getTime();

         //保存时的键名是毫秒数，键值是留言内容

         localStorage.setItem(time,str);

         alert('数据已经被保存');

         readData('msg');

}

//读取本地磁盘中的数据并以表格的形式显示到p元素的位置

functionreadData(id){

         //创建一个空表格

         var table="";

         //读取磁盘中的所有数据，并将其添加到表格中显示出来

         for(vari=0;i

                   //获取留言时间表示的毫秒数

                   var key=localStorage.key(i);

                   //获取留言内容

                   varvalue=localStorage.getItem(key);

                   //重新设置当前时间为留言时间

                   var date=new Date();

                   date.setTime(key);

                   //将留言时间设置成GMT格林威治时间形式的字符串

                   var dateStr=date.toGMTString();

                   //将序号、留言内容、留言时间添加到表格中

                   table +='' + '这是第' + i + '条数据' + ''

                   +  value + '' + dateStr+  '';

         }

         table += '';

         var p=document.getElementById(id);

         p.innerHTML=table;

}

//将磁盘中的数据全部删除

functionclearData(id){

         localStorage.clear();

         alert('数据已经被成功删除');

         readData('msg');

}

效果图为：