Web Storage的使用实例——简单web留言本
Posted May的博客
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web Storage的使用实例——简单web留言本相关的知识，希望对你有一定的参考价值。
简单web留言本
通过一个简单web留言本的示例来学习如何利用webStorage保存和读取大量的数据。
实现原理：
使用一个多行文本框来输入数据，单击按钮时将文本框中的数据保存到localStorage中，在表单下部放置一个p元素里显示保存后的数据；在保存文本框中的内容，并不知道该内容是什么时候写好的，所以在保存该内容的时候也要保存当前日期和时间，并将该日期和时间一并显示在p元素中。因为再利用webStorage保存数据时，数据必须是“键名/键值”格式，所以将日期作为键名，文本框中的内容作为键值（计算机中的时间按是以时间戳【1970-1-1凌晨12点后经过的秒数】的形式来进行管理的，送一保存是不可能出现重复的键名）。单击追加按钮来保存数据；单击初始化按钮来消除全部数据。
具体实现：
messageBoard.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>简单web留言本</title>
<script type="text/javascript" src="script2.js"></script>
</head>
<body>
<h1>简单web留言本</h1>
<textarea id="memo" cols="60" rows="10"></textarea><br/>
<input type="button" value="追加" οnclick="saveStorage('memo');">
<input type="button" value="初始化" οnclick="clearStorage('msg');">
<hr>
<p id="msg"></p>
</body>
</html>
script2.js
//用于保存数据function saveStorage(id)
var data = document.getElementById(id).value;
var time = new Date().getTime();//获得当前日期和时间的时间戳
localStorage.setItem(time,data);
alert("数据已保存。")
loadStorage('msg');
//用于取得保存后的所有数据，然后以表格的形式显示
function loadStorage(id)
var result = '<table border="1">';
for(var i = 0;i < localStorage.length;i++) //localStorage.length所有保存在localStorage中的数据条数
var key = localStorage.key(i); //得到localStorage中与相应索引号对应的数据
var value = localStorage.getItem(key);
var date = new Date();
date.setTime(key);
var datestr = date.toGMTString();
result += '<tr><td>' + value + '</td><td>' + datestr + '</td></tr>';
result += '</table>';
var target = document.getElementById(id);
target.innerHTML = result;
//将localStorage中保存的数据全部清除
function clearStorage()
localStorage.clear();
alert("全部数据被清除。");
loadStorage('msg');
运行结果：
以上是关于Web Storage的使用实例——简单web留言本的主要内容，如果未能解决你的问题，请参考以下文章