副队长JavaScript教程(66)-本地存储实战：待办事项网页的开发-北京尧图网络

点此查看所有教程、项目、源码导航文章目录1. 需求说明2. 实现思路3. 分步讲解3.1 HTML 结构、CSS样式3.2 获取页面元素3.3 读取本地存储里面的待办数据3.4 封装渲染函数3.5 新增待办逻辑4. 完整可运行代码5. 重点复盘1. 需求说明我们来实现一个极简的待办事项是前端入门很经典的案例。功能清单在输入框输入待办内容点击新增按钮添加一条待办每条待办后面有删除按钮可以单独删除这一条页面刷新、关闭浏览器再打开待办数据不会丢失localStorage JSON知识点回顾localStorage 只能保存字符串数组需要先用JSON.stringify序列化为 JSON 字符串再存入读取的时候用JSON.parse把字符串转回 JS 数组2. 实现思路页面加载时先从 localStorage 读取待办数据没有数据就使用空数组封装 render 渲染函数把待办数组渲染到页面新增拿到输入框内容添加进数组保存到本地存储重新渲染删除单条根据下标删除数组对应项保存、重渲染。3. 分步讲解3.1 HTML 结构、CSS样式输入框、新增按钮列表容器inputtypetextidtodoInputplaceholder请输入待办事项buttonidaddBtn新增待办/buttonulidtodoList/ul效果CSS部分如下当然如果只是为了学习本地存储的话CSS这一部分代码可以不看style/* 全局重置清除默认内外边距统一盒模型 */*{margin:0;padding:0;box-sizing:border-box;}/* 页面主体样式居中、设置背景色、字体 */body{width:600px;margin:50px auto;font-family:Microsoft Yahei,sans-serif;background-color:#f5f7fa;}/* 标题样式 */h2{text-align:center;color:#333;margin-bottom:20px;}/* 输入区域容器弹性布局控制输入框和按钮间距 */.input-wrap{display:flex;gap:10px;margin-bottom:20px;}/* 输入框样式弹性占满剩余宽度 */#todoInput{flex:1;padding:10px 14px;border:1px solid #ccc;border-radius:6px;font-size:16px;}/* 新增按钮基础样式 */#addBtn{padding:10px 20px;background-color:#409eff;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:16px;}/* 鼠标悬浮在新增按钮上颜色加深 */#addBtn:hover{background-color:#337ecc;}/* 待办列表容器去掉默认圆点白色背景圆角 */#todoList{list-style:none;background:#fff;border-radius:8px;overflow:hidden;}/* 每一条待办项弹性布局文字和删除按钮左右分开 */#todoList li{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #eee;font-size:16px;}/* 最后一条待办去掉底部边框 */#todoList li:last-child{border-bottom:none;}/* 删除按钮样式红色风格 */#todoList li button{padding:6px 12px;background-color:#f56c6c;color:#fff;border:none;border-radius:4px;cursor:pointer;}/* 删除按钮悬浮效果 */#todoList li button:hover{background-color:#dd6161;}/style3.2 获取页面元素vartodoInputdocument.getElementById(todoInput);varaddBtndocument.getElementById(addBtn);vartodoListdocument.getElementById(todoList);3.3 读取本地存储里面的待办数据varstrlocalStorage.getItem(todoData);// 有数据就转数组没有就初始化为空数组vartodoArrstr?JSON.parse(str):[];3.4 封装渲染函数functionrender(){// 清空旧列表todoList.innerHTML;for(vari0;itodoArr.length;i){varlidocument.createElement(li);li.innerTexttodoArr[i];// 删除按钮vardelBtndocument.createElement(button);delBtn.innerText删除;delBtn.style.marginLeft10px;delBtn.onclickfunction(){// 找到删除的元素在数组中的序号varindexArray.from(this.parentElement.parentElement.children).indexOf(this.parentElement);todoArr.splice(index,1);localStorage.setItem(todoData,JSON.stringify(todoArr));render();}li.appendChild(delBtn);todoList.appendChild(li);}}// 页面打开先渲染一次render();3.5 新增待办逻辑addBtn.onclickfunction(){varcontenttodoInput.value.trim();if(content){alert(待办内容不能为空);return;}todoArr.push(content);localStorage.setItem(todoData,JSON.stringify(todoArr));render();// 清空输入框todoInput.value;}4. 完整可运行代码!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title简易持久化待办事项/titlestyle/* 全局重置清除默认内外边距统一盒模型 */*{margin:0;padding:0;box-sizing:border-box;}/* 页面主体样式居中、设置背景色、字体 */body{width:600px;margin:50px auto;font-family:Microsoft Yahei,sans-serif;background-color:#f5f7fa;}/* 标题样式 */h2{text-align:center;color:#333;margin-bottom:20px;}/* 输入区域容器弹性布局控制输入框和按钮间距 */.input-wrap{display:flex;gap:10px;margin-bottom:20px;}/* 输入框样式弹性占满剩余宽度 */#todoInput{flex:1;padding:10px 14px;border:1px solid #ccc;border-radius:6px;font-size:16px;}/* 新增按钮基础样式 */#addBtn{padding:10px 20px;background-color:#409eff;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:16px;}/* 鼠标悬浮在新增按钮上颜色加深 */#addBtn:hover{background-color:#337ecc;}/* 待办列表容器去掉默认圆点白色背景圆角 */#todoList{list-style:none;background:#fff;border-radius:8px;overflow:hidden;}/* 每一条待办项弹性布局文字和删除按钮左右分开 */#todoList li{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #eee;font-size:16px;}/* 最后一条待办去掉底部边框 */#todoList li:last-child{border-bottom:none;}/* 删除按钮样式红色风格 */#todoList li button{padding:6px 12px;background-color:#f56c6c;color:#fff;border:none;border-radius:4px;cursor:pointer;}/* 删除按钮悬浮效果 */#todoList li button:hover{background-color:#dd6161;}/style/headbodyinputtypetextidtodoInputplaceholder请输入待办事项buttonidaddBtn新增待办/buttonulidtodoList/ulscriptvartodoInputdocument.getElementById(todoInput);varaddBtndocument.getElementById(addBtn);vartodoListdocument.getElementById(todoList);varstrlocalStorage.getItem(todoData);vartodoArrstr?JSON.parse(str):[];functionrender(){todoList.innerHTML;for(vari0;itodoArr.length;i){varlidocument.createElement(li);li.innerTexttodoArr[i];vardelBtndocument.createElement(button);delBtn.innerText删除;delBtn.style.marginLeft10px;delBtn.onclickfunction(){varindexArray.from(this.parentElement.parentElement.children).indexOf(this.parentElement);todoArr.splice(index,1);localStorage.setItem(todoData,JSON.stringify(todoArr));render();}li.appendChild(delBtn);todoList.appendChild(li);}}render();addBtn.onclickfunction(){varcontenttodoInput.value.trim();if(content){alert(待办内容不能为空);return;}todoArr.push(content);localStorage.setItem(todoData,JSON.stringify(todoArr));render();todoInput.value;}/script/body/html效果注意刷新后待办事项仍能保留。5. 重点复盘数组不能直接放进 localStorage必须JSON.stringify()序列化读取出来的是字符串要用JSON.parse()转回数组新增、删除数据之后都要重新保存到 localStorage再调用渲染函数数据保存在浏览器本地刷新页面、关闭浏览器再打开数据依旧存在清除浏览器缓存才会消失。

副队长JavaScript教程(66)-本地存储实战：待办事项网页的开发

相关推荐

副队长JavaScript教程(64)-本地存储：localStorage 与 sessionStorage

副队长JavaScript教程(63)-BOM之窗口大小与页面滚动

认识Minilytics：免费自托管分析工具，告诉你到底是哪条推文让你赚了钱

更多资讯

副队长JavaScript教程(62)-BOM之定时器

副队长JavaScript教程(61)-BOM之location、history、navigator常见用法

数据图表也有设计门槛：6款主流产品谁能做出更专业的商业图表？

AWESOME-OCR-LLM完整指南：一文读懂大模型时代OCR的900+篇论文全景

MediaPipe手势识别Android集成实战：从关键点到源码避坑

一枚回形针的门道：材料工艺、办公整理与手工改造全拆解

今日更新

AI智能体开发实战：从技术原理到商业落地

OpenShell 完全定制指南：从安装到深度配置，打造高效 Windows 开始菜单

Superpowers技能体系全解析：从Skills引入到安装的完整指南

本周精选

防幻觉智能体架构：电源硬件设计中的大模型编排与工具化实践

OpenGL面试核心考点：渲染管线、矩阵变换与性能排查全解析

全国计算机二级C语言真题PDF高效刷题指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？