简单Web留言本

概念:

虽然使用getItem这种一对一方法读取数据比较方便,但遇到保存的数据量很大时,使用这种方法会很麻烦,我们可以来看一下简单Web留言的示例。

使用一个多行文本框来输入数据,点击按钮时将文本框中的数据保存到localStorage中,在表单下部放置一个p元素来显示保存后的数据。

如果只保存文本框的内容,并不知道该内容时什么时候写好的,所以保存该内容的同时也保存了当前日期和时间,并将该日期和时间一并显示在p元素中。

利用Web Storage保存数据时,数据必须是“键名/键值”这样的格式,所以将文本框的内容作为键值,保存的日期和时间作为键名来进行保存,计算机中对于日期和时间的值是以时间戳的形式进行管理的,所以保存时不可能存在重复的键名。

应用:

<html>
<head>
<title></title>


</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="初始化" onclick="clearStorage('msg');">
<hr>
<p id="msg"></p>
</body>
<script type="text/javascript" src="script.js">

</script>
</html>

原文地址:https://www.cnblogs.com/yanyanstyle/p/11429980.html