本文通过一个完整的TodoList记事本Demo，演示如何利用HTML构建结构、CSS美化界面，并结合JavaScript实现数据的增删改查功能。重点解析了如何使用localStorage进行本地数据持久化存储，确保页面刷新后数据不丢失，适合前端初学者巩固基础并理解前后端交互逻辑。
1、项目简介
在完成HTML、CSS基础及JavaScript初步学习后，笔者利用业余时间开发了一个简易的TodoList应用Demo。该应用核心功能涵盖数据的增加、删除、修改与查询（增删改查），并引入localStorage技术实现数据的本地持久化存储，具体实现细节如下文所述。
2、运行效果展示
在输入框中键入待办事项内容：
点击添加后，新事项默认归入“未完成”列表：
对已添加的事项进行内容编辑：
编辑操作执行成功：
将编辑后的事项状态标记为“已完成”：
执行删除操作，移除“干饭”与“睡觉”两项：
3、代码实现解析
以下为核心代码展示：
HTML结构部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TodoList</title>
<link rel="stylesheet" type="text/css" href="index.css" rel="external nofollow" />
</head>
<body>
<!-- header -->
<div id="header">
<label class="text">TodoList</label>
<input id="todo" class="head" type="text" placeholder="请输入代办事项">
<button id="add" class="add" onclick="add()">添加</button>
</div>
<!-- content -->
<div id="container">
<h1 class="title">未完成</h1>
<span id="todocount"></span>
<ol id="todolist">
</ol>
<h1 class="title">已完成</h1>
<span id="donecount"></span>
<ol id="donelist">
</ol>
</div>
</body>
<script type="text/javascript" src="index.js"></script>
</html>
页面结构主要划分为头部输入区与内容展示区。其中，todocount与donecount分别用于显示未完成事项与已完成事项的数量，list区域则用于渲染具体事项列表。初始状态下列表为空，内容需通过JavaScript动态添加并渲染。
CSS样式部分：
* {
margin: 0;
padding: 0;
}
body {
background-color: #b8c9ff;
}
#header {
margin: 0 auto;
font-size: 50px;
width: 700px;
text-align: center;
height: 150px;
}
.title {
display: inline-flex;
}
.head {
-webkit-appearance: none;
border-radius: 25px;
width: 500px;
height: 60px;
box-shadow: 5px 5px 10px #556677;
border: 1px solid #556677;
font-size: 30px;
padding-left: 25px;
outline: 0;
margin: 0 auto;
display: inline-flex;
}
.add {
width: 80px;
height: 50px;
border-radius: 25px;
outline: 0;
border: 1 solid #556677;
float: right;
margin: 20px 0 0;
font-size: 20px;
}
#container {
margin: 0 auto;
width: 700px;
height: 150px;
}
.del {
width: 120px;
height: 70px;
border-radius: 25px;
outline: 0;
border: 1 solid #556677;
font-size: 20px;
display: flex;
margin: 0 auto;
}
ol {
margin-top: 20px;
margin-bottom: 20px;
}
ol li {
width: 600px;
height: 30px;
background-color: #fff;
list-style: none;
text-align: center;
font-size: 20px;
border-radius: 25px;
margin-top: 10px;
padding: 10px;
box-shadow: 5px 5px 10px #556677;
}
ol li span {
float: left;
}
ol li button {
float: right;
width: 70px;
height: 30px;
margin-top: 0px;
margin-left: 10px;
border-radius: 25px;
box-shadow: 5px 5px 10px #556677;
outline: 0;
}
.del1 {
background-color: #f40;
border-radius: 25px;
width: 50px;
height: 30px;
box-shadow: 5px 5px 10px #556677;
outline: 0;
}
.edit {
background-color: royalblue;
border-radius: 25px;
width: 50px;
height: 30px;
box-shadow: 5px 5px 10px #556677;
outline: 0;
color: #FFFFFF;
}
#todocount {
width: 30px;
height: 30px;
background-color: #FFFFFF;
display: inline-block;
border-radius: 50%;
float: right;
font-size: 1em;
margin-top: 10px;
text-align: center;
line-height: 30px;
}
#donecount {
width: 30px;
height: 30px;
background-color: #FFFFFF;
display: inline-block;
border-radius: 50%;
float: right;
font-size: 1em;
margin-top: 10px;
text-align: center;
line-height: 30px;
}
CSS样式部分此处不再赘述，笔者自认界面设计较为简陋，读者如有需求可自行进行视觉优化。
JavaScript逻辑部分：
window.addEventListener("load", load); //页面加载完调用load函数，即页面的初始化
document.getElementById("todo").onkeypress = function (event) {
if (event.keyCode === 13) {/*13表示按下回车*/
add(event);
}
};
var todolist;//定义全局变量
function load() { //加载所有事项的函数
var todo = document.getElementById("todolist");//获取DOM元素
var done = document.getElementById("donelist");
var todonum = document.getElementById("todocount");
var donenum = document.getElementById("donecount");
var todocontent = "";//设置初始值
var donecontent = "";
var todocount = 0;
var donecount = 0;
var list = localStorage.getItem("todolist");//获取本地上todolist的数据
if (list != null) {//不为空时
todolist = JSON.parse(list); //JSON对象转换为JS对象
} else {
todolist = [];//置空
}
if (todolist != null) {
for (var i = 0; i < todolist.length; i++) {//遍历已转化成js对象的todolist
if (todolist[i].done == false) {//done为false即还未完成的情况
todocontent += "<li>" + "<span>" + todolist[i].todo + "</span>" +
"<button οnclick=" + "edit(" + i + ") class='edit'>修改</button>" +
"<button οnclick=" + "del(" + i + ") class='del1'>删除</button>" +
"<button οnclick=" + "changedone(" + i + ")>确认完成</button>"
+ "</li>"; //拼接上字符串，以便后续使用
todocount++;//未完成的数量加一
} else {
donecontent += "<li>" + "<span>" + todolist[i].todo + "</span>" +
"<button οnclick=" + "edit(" + i + ") class='edit'>修改</button>" +
"<button οnclick=" + "del(" + i + ") class='del1'>删除</button>" +
"<button οnclick=" + "changetodo(" + i + ")>取消完成</button>"
+ "</li>";
donecount++;//已完成的数量加一
}
}
todo.innerHTML = todocontent;//往todo所代表标签添加内容
done.innerHTML = donecontent;//往done所代表标签添加内容
todonum.innerHTML = todocount;//往todonum所代表标签添加内容
donenum.innerHTML = donecount;//往donenum所代表标签添加内容
} else { //当todolist为空时
todo.innerHTML = "";
done.innerHTML = "";
todonum.innerHTML = 0;
donenum.innerHTML = 0;
}
}
function add(e) { //添加事项的函数
var newtodo = {
todo: "", //用户输入的内容
done: false //done表示是否完成该事项
};
var temp = document.getElementById("todo").value; //使用temp存储id为todo标签的value值
if (temp.length == 0 && temp.trim() == "") { //当输入为空时
alert('输入事项不能为空');
return;
}
var flag = confirm('您确定要添加该事项吗?');//弹出确认框
if(flag){//选择是
newtodo.todo = temp; //将temp值赋给newtodo对象的todo属性
todolist.push(newtodo); //往todolist中添加对象
document.getElementById("todo").value = ""; //对输入框进行初始化
save(); //保存
alert('添加成功');
}else{
alert('操作出错');
return ;
}
}
function changedone(i){ //将未完成的事项改变成已完成
var flag = confirm('您确定要完成该事项吗?');
if(flag){
todolist[i].done = true; //改变done的状态
save();
alert('修改成功');
}else{
alert('操作出错');
return ;
}
}
function changetodo(i){ //将已完成的事项改变成未完成
var flag = confirm('您确定要取消完成该事项吗?');
if(flag){
todolist[i].done = false;//改变done的状态
save();
alert('修改成功');
}else{
alert('操作出错');
return ;
}
}
function edit(i) { //修改事项的内容
var temp = prompt("请输入你想要修改的内容",todolist[i].todo);
if(temp != null && temp.trim() != ""){//当修改后内容不为空时
todolist[i].todo = temp; //修改内容
alert('修改成功');
save();
}else{
alert('输入字符串为空,修改失败');
}
}
function del(i) { //删除相应的事项
var flag = confirm('您确定要删除该事项吗?');
if(flag){
todolist.splice(i, 1); //删除掉指定的一个元素
save();
alert('删除成功');
}else{
alert('操作出错');
return ;
}
}
function save(){ //保存事项的函数
localStorage.setItem("todolist", JSON.stringify(todolist)); //将JS对象转化成JSON对象并保存到本地
load(); //每次保存完都刷新页面
}
本Demo的核心逻辑集中在JavaScript部分，代码注释已尽量详尽。主要涉及增删改查四个核心函数，以及初始化逻辑与持久化存储的使用机制。需特别注意，每次执行修改或添加操作后，必须调用保存函数并重新加载内容，否则界面无法及时反映最新数据。此外，由于未做跨设备样式适配，直接复制代码在不同设备上可能存在样式差异。
4、总结与心得
本次Demo实践将此前学习的HTML、CSS及JavaScript知识进行了综合应用，并在调试过程中复习了部分遗忘的知识点。尽管Demo功能尚不完善，且在开发过程中查阅了大量资料，但整体收获颇丰。建议前端初学者在完成阶段性学习后，及时动手编写Demo进行实践，因为编程能力的提升更依赖于实际操作。
至此，关于使用HTML+CSS+JS构建简易TodoList（记事本）的介绍已完毕。如需了解更多相关操作实例，欢迎查阅本站往期文章或继续浏览后续内容，感谢大家的支持！