-本地存储实战：待办事项网页的开发)
点此查看所有教程、项目、源码导航文章目录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再调用渲染函数数据保存在浏览器本地刷新页面、关闭浏览器再打开数据依旧存在清除浏览器缓存才会消失。
点此查看所有教程、项目、源码导航文章目录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再调用渲染函数数据保存在浏览器本地刷新页面、关闭浏览器再打开数据依旧存在清除浏览器缓存才会消失。
-本地存储：localStorage 与 sessionStorage)
-BOM之窗口大小与页面滚动)
