JavaScript 实现 Web 留言板功能：基于 localStorage 的本地存储方案
本文介绍如何使用 JavaScript 结合 localStorage 实现一个简易的 Web 留言板。通过获取用户输入的标题和内容，将其封装为 JSON 对象并序列化为字符串存入本地存储。点击提交按钮时，读取缓存数据并在界面动态展示，实现无需后端支持的本地留言功能。
Web 留言板功能概述
本文分享了一个使用 JavaScript 实现 Web 留言板的具体代码示例，供读者参考学习。
页面元素布局与获取
首先，在页面布局中设计一个标题栏用于输入心情或标题，一个内容栏用于输入笔记正文，以及一个提交按钮和用于显示留言的留言板区域。
心情:<br/> <input type="text" id="mood"/><br/>
笔记:<br/> <textarea id="network"></textarea><br/>
<button id="send">发表</button>
<div class="ban"></div>其次，通过 JavaScript 动态获取页面上定义的各个 DOM 元素，包括输入框、文本域、提交按钮以及显示留言的容器。
var mood=document.getElementById ("mood");
var network=document.getElementById ("network");
var send=document.getElementById ("send");
var ban=document.querySelector (".ban");提交事件处理逻辑
接着，为提交按钮绑定点击事件监听器。当用户点击提交按钮时，程序读取输入内容，处理后将其显示在留言板区域的最下方。
数据缓存与存储实现
在实现过程中，建议充分利用浏览器提供的 localStorage 缓存功能，并可以利用当前时间作为键值来存储或获取缓存数据。
var time=new Date();需要构建一个 JSON 对象，用于暂存用户输入的标题（mood）和内容（network）的值。
var shuju={
mymood:mood.value,
mynetwork:network .value,
now_time:time.toLocaleString() //2019/7/2 下午7:42:15
};在将 JSON 对象保存到 localStorage 之前，必须使用 JSON.stringify 方法将其转换为字符串格式，以确保数据能正确存储。
编写一个专门用于读取数据的函数。该函数从 localStorage 中获取存储的内容，解析后将其渲染并显示在留言板的界面上。
function readdata(){
ban.innerHTML ="";
var length=localStorage.length-1;
for(var i=length;i>=0;i--){
var k=localStorage.key(i); //获取key值
var data=JSON.parse (localStorage.getItem(k)); //
console.log(k);
ban.innerHTML +=data.mymood +" "+data.mynetwork +" "+ data.now_time +"<br/>";
}
}以下是完整的实现源码。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.ban{
width:500px;
height:auto;
border:1px solid black;
}
#send {
width:40px;
height:25px;
font-size: 12px;
text-align: center;
line-height: 25px;
background: paleturquoise;
}
</style>
</head>
<body>
心情:<br/> <input type="text" id="mood"/><br/>
笔记:<br/> <textarea id="network"></textarea><br/>
<button id="send">发表</button>
<div class="ban"></div>
<script>
var mood=document.getElementById ("mood");
var network=document.getElementById ("network");
var send=document.getElementById ("send");
var ban=document.querySelector (".ban");
//localStorage.clear ();
readdata();
send.onclick =function(){
var time=new Date();
var shuju={
mymood:mood.value,
mynetwork:network .value,
now_time:time.toLocaleString() //2019/7/2 下午7:42:15
};
// console.log(JSON.stringify (shuju));
localStorage.setItem (time.getTime(),JSON.stringify (shuju));
mood.value="";
network.value ="";
// alert("发表成功");
readdata();
}
function readdata(){
ban.innerHTML ="";
var length=localStorage.length-1;
for(var i=length;i>=0;i--){
var k=localStorage.key(i); //获取key值
var data=JSON.parse (localStorage.getItem(k)); //
console.log(k);
ban.innerHTML +=data.mymood +" "+data.mynetwork +" "+ data.now_time +"<br/>";
}
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对读者的学习有所帮助，也欢迎大家继续支持本站。
D3.js 比例尺与坐标轴的配置详解
2026-11-05 16:54:46
JavaScript怎么遍历对象的Symbol键和不可枚举属性
2026-11-05 13:13:39
封装一个健壮的JS字符串判空工具函数
2026-11-05 12:16:14
JavaScript合并数组的三种常用方法：concat、扩展运算符与push
2026-11-05 11:22:29
JavaScript立即执行函数(IIFE)是什么及基本语法
2026-11-05 10:51:19