news 2026/4/29 19:20:55

JavaScript 本地存储与动态数据渲染实战案例

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
JavaScript 本地存储与动态数据渲染实战案例

JavaScript 本地存储与动态数据渲染实战案例

一、案例概述

在前端开发中，本地存储（localStorage）是无需后端数据库即可实现数据持久化的核心技术，动态数据渲染则是前端页面展示数据的基础能力。本案例通过一个轻量化的「待办事项（TODO）管理工具」，结合两者实现完整功能：用户添加、删除、标记完成待办事项，所有数据自动保存到浏览器本地存储，刷新页面后数据不丢失，同时通过JavaScript动态将数据渲染到页面。

本案例适合前端初学者，覆盖JavaScript DOM操作、本地存储API、数据逻辑处理、事件绑定等核心知识点，无需依赖任何框架，纯原生代码即可运行，可直接部署到本地浏览器使用。

二、核心技术知识点

  1. localStorage本地存储：浏览器提供的持久化存储方案，存储键值对数据，数据永久生效（除非手动清除），存储容量约5MB；
  2. DOM操作：通过JavaScript获取、创建、修改、删除HTML元素，实现页面动态更新；
  3. 事件监听：绑定点击、提交等事件，实现用户交互响应；
  4. 数据处理：数组增删改查、JSON序列化与反序列化（localStorage仅支持字符串存储）；
  5. 页面初始化：刷新页面时自动读取本地数据并渲染。

三、实现环境

  • 编辑器：VS Code（任意文本编辑器均可）
  • 运行环境：Chrome/Firefox等现代浏览器
  • 技术栈：HTML5 + CSS3 + 原生JavaScript（无第三方依赖）

四、完整代码实现

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>TODO本地存储管理工具</title><style>*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,sans-serif;}.todo-container{width:500px;margin:50px auto;padding:20px;border:1px solid #eee;border-radius:8px;}.input-box{display:flex;gap:10px;margin-bottom:20px;}#todo-input{flex:1;padding:8px 12px;border:1px solid #ddd;border-radius:4px;}#add-btn{padding:8px 16px;background:#409eff;color:white;border:none;border-radius:4px;cursor:pointer;}#add-btn:hover{background:#337ecc;}.todo-list{list-style:none;}.todo-item{display:flex;justify-content:space-between;align-items:center;padding:10px;border-bottom:1px solid #eee;}.todo-text{cursor:pointer;}.completed{text-decoration:line-through;color:#999;}.del-btn{color:#f56c6c;cursor:pointer;border:none;background:none;}</style></head><body><divclass="todo-container"><h2>待办事项管理</h2><divclass="input-box"><inputtype="text"id="todo-input"placeholder="请输入待办事项"><buttonid="add-btn">添加</button></div><ulclass="todo-list"id="todo-list"></ul></div><script>// 获取DOM元素consttodoInput=document.getElementById('todo-input');constaddBtn=document.getElementById('add-btn');consttodoList=document.getElementById('todo-list');// 初始化：读取本地存储数据lettodos=JSON.parse(localStorage.getItem('todos'))||[];// 页面加载时渲染数据window.addEventListener('DOMContentLoaded',renderTodoList);// 添加按钮点击事件addBtn.addEventListener('click',addTodo);// 回车快捷添加todoInput.addEventListener('keydown',(e)=>e.key==='Enter'&&addTodo());/** * 添加待办事项 */functionaddTodo(){consttext=todoInput.value.trim();if(!text)returnalert('请输入内容！');// 创建新待办对象constnewTodo={id:Date.now(),// 唯一IDtext:text,completed:false// 完成状态};todos.push(newTodo);// 追加到数组saveToLocal();// 保存到本地renderTodoList();// 重新渲染页面todoInput.value='';// 清空输入框}/** * 渲染待办列表到页面 */functionrenderTodoList(){todoList.innerHTML='';// 清空原有内容todos.forEach(todo=>{constli=document.createElement('li');li.className=`todo-item${todo.completed?'completed':''}`;li.innerHTML=`<span class="todo-text">${todo.id}">${todo.text}</span> <button class="del-btn">${todo.id}">删除</button>`;todoList.appendChild(li);});// 绑定状态切换和删除事件bindTodoEvents();}/** * 绑定待办事项交互事件 */functionbindTodoEvents(){// 切换完成状态document.querySelectorAll('.todo-text').forEach(item=>{item.addEventListener('click',toggleComplete);});// 删除事项document.querySelectorAll('.del-btn').forEach(btn=>{btn.addEventListener('click',deleteTodo);});}/** * 切换待办事项完成状态 */functiontoggleComplete(e){constid=parseInt(e.target.dataset.id);todos=todos.map(todo=>{if(todo.id===id)todo.completed=!todo.completed;returntodo;});saveToLocal();renderTodoList();}/** * 删除待办事项 */functiondeleteTodo(e){constid=parseInt(e.target.dataset.id);todos=todos.filter(todo=>todo.id!==id);saveToLocal();renderTodoList();}/** * 保存数据到localStorage */functionsaveToLocal(){localStorage.setItem('todos',JSON.stringify(todos));}</script></body></html>

五、代码核心解析

1. 本地存储数据处理

  • 读取数据：JSON.parse(localStorage.getItem('todos')) || []，本地无数据时返回空数组，避免报错；
  • 保存数据：localStorage.setItem('todos', JSON.stringify(todos))，将数组转为JSON字符串存储（localStorage不支持直接存储对象/数组）。

2. 动态渲染逻辑

  • 每次数据变更（添加、删除、状态切换）后，清空列表容器，遍历数据数组重新创建DOM元素；
  • 通过自定义data-id属性绑定数据唯一标识，实现精准操作对应事项。

3. 交互功能实现

  • 添加功能：校验输入内容，生成唯一ID，追加到数组并保存；
  • 状态切换：点击文本切换completed状态，添加删除线样式；
  • 删除功能：过滤掉对应ID的数据，更新本地存储。

六、功能测试步骤

  1. 将代码复制到文本编辑器，保存为.html文件；
  2. 用浏览器打开该文件，输入待办内容点击「添加」，或按回车快速添加；
  3. 点击待办文本，标记为已完成（显示删除线）；
  4. 点击「删除」按钮，移除对应事项；
  5. 刷新浏览器页面，所有数据保持不变，验证本地存储生效。

七、案例扩展方向

  1. 增加编辑功能：支持修改已添加的待办事项；
  2. 增加筛选功能：区分显示全部、未完成、已完成事项；
  3. 增加清空全部功能：一键清除所有待办数据；
  4. 样式优化：添加动画效果、响应式布局适配移动端。

八、总结

本案例通过原生JavaScript实现了本地存储与动态数据渲染的完整闭环，核心是数据驱动视图：所有交互基于数据数组操作，视图根据数据自动更新，同时通过localStorage完成数据持久化。该模式是前端开发的基础逻辑，掌握后可快速上手Vue、React等主流框架，也能独立开发轻量化前端工具。

版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/4/29 19:18:23

AI驱动预测市场交易机器人：架构、实现与风控全解析

1. 项目概述&#xff1a;一个基于AI的Polymarket预测市场交易机器人最近在逛GitHub的时候&#xff0c;发现了一个挺有意思的项目&#xff0c;叫openclaw-ai-polymarket-trading-bot。光看名字&#xff0c;就能拆解出几个核心要素&#xff1a;openclaw可能是项目代号或团队名&am…

作者头像 李华
网站建设 2026/4/29 19:16:24

别再手动算三角函数了！手把手教你用Vivado CORDIC IP核生成高精度sin/cos（附避坑指南）

高效实现FPGA三角函数计算&#xff1a;Vivado CORDIC IP核深度解析与实战 在数字信号处理、电机控制、雷达系统等实时性要求高的应用场景中&#xff0c;三角函数的硬件加速计算一直是FPGA开发者的核心需求。传统查表法占用大量存储资源&#xff0c;而软件迭代计算又难以满足严格…

作者头像 李华
网站建设 2026/4/29 19:16:23

仲景中医AI助手：免费开源的智能诊疗完整指南

仲景中医AI助手&#xff1a;免费开源的智能诊疗完整指南 【免费下载链接】CMLM-ZhongJing 首个中医大语言模型——“仲景”。受古代中医学巨匠张仲景深邃智慧启迪&#xff0c;专为传统中医领域打造的预训练大语言模型。 The first-ever Traditional Chinese Medicine large lan…

作者头像 李华
网站建设 2026/4/29 19:16:23

暗影精灵性能释放：OmenSuperHub硬件控制全解析

暗影精灵性能释放&#xff1a;OmenSuperHub硬件控制全解析 【免费下载链接】OmenSuperHub 使用 WMI BIOS控制性能和风扇速度&#xff0c;自动解除DB功耗限制。 项目地址: https://gitcode.com/gh_mirrors/om/OmenSuperHub 在游戏笔记本领域&#xff0c;惠普暗影精灵系列…

作者头像 李华
网站建设 2026/4/29 19:11:02

Wan2.2-I2V-A14B参数调优指南：平衡生成质量、时长与显存占用的黄金组合

Wan2.2-I2V-A14B参数调优指南&#xff1a;平衡生成质量、时长与显存占用的黄金组合 1. 理解模型参数的核心影响 Wan2.2-I2V-A14B作为一款高性能文生视频模型&#xff0c;其参数设置直接影响生成效果、处理速度和硬件资源消耗。在RTX 4090D 24GB显存的配置下&#xff0c;我们需…

作者头像 李华