当前位置：首页 > news >正文

vue学习-07todoList案例与浏览器本地存储

news 2025/7/8 2:56:25

TodoList

Todo List（任务列表）是一个简单的Web应用程序示例，用于管理任务、代办事项或清单。Vue.js 是一个非常适合构建这种类型应用程序的框架，因为它提供了数据绑定、组件化、响应式和轻松管理用户界面的能力。

以下是一个基本的Vue.js Todo List的示例：

任务列表显示：在Vue.js中，你可以使用数据绑定来动态渲染任务列表。任务列表通常以一个数组的形式存在，Vue.js会帮助你将这个数组与界面上的任务列表元素绑定起来。
添加任务：用户可以通过输入框输入新任务，并点击“添加”按钮或按下回车键来将任务添加到列表中。Vue.js的事件绑定功能可以帮助你监听用户的操作。
标记任务完成：通常，每个任务都有一个复选框或其他方式来标记是否完成。Vue.js可以帮助你实现这一功能，并在任务状态发生变化时更新界面。
删除任务：用户可以通过点击删除按钮来删除任务。Vue.js的事件处理程序可以监听点击事件，并在任务被删除时更新任务列表。
过滤任务：有时用户希望能够按状态（已完成、未完成）或其他条件过滤任务列表。Vue.js可以帮助你实现这一功能，通过过滤和排序任务数组来呈现不同的视图。
本地存储：为了确保用户的任务在页面刷新后不会丢失，你可以使用浏览器本地存储技术（如localStorage）来将任务数据存储在用户的浏览器中。

App.vue

<template><div id="root"><div class="todo-container"><div class="todo-wrap"><!-- 编写组件标签，头部组件 --><MyHeader :addTodo="addTodo"></MyHeader><!-- 内容列表组件 --><MyList :todos="todos" :checkTodo="checkTodo":todoDelete="todoDelete"></MyList><!-- 下脚组件 --><MyFooter :todos="todos":checkAllTodo="checkAllTodo":clearAllTodo="clearAllTodo"></MyFooter></div></div></div>
</template><script>//引入组件import MyHeader from './components/MyHeader.vue';import MyFooter from './components/MyFooter.vue';import MyList from './components/MyList.vue';export default {name:'App',components:{MyHeader,MyFooter,MyList},data() {return {todos:[{id:"001",title:'吃饭',done:true},{id:"002",title:'睡觉',done:false},{id:"003",title:'学习',done:true},{id:"004",title:'抽烟',done:false},{id:"005",title:'喝酒',done:false},{id:"006",title:'开车',done:true}]}},methods:{// 添加一个todoaddTodo(todoObj){console.log("我是组件App，我收到数据:",todoObj);//this.todos.push(x);//将数据加入数组中this.todos.unshift(todoObj);//将数据加入数组中},//勾选or取消一个todocheckTodo(id){// for (let index = 0; index < this.todos.length; index++) {//     if(this.todos[index].id===id){//         this.todos[index].done=!this.todos[index].done;//     }// }//使用forEach，注意：当foreach无法使用的使用可能是脚手架没有安装对应的js版本，需要运行：npm install core-js@3.6.4名this.todos.forEach((todo)=>{if (todo.id===id) {todo.done=!todo.done;}});},//删除一个todotodoDelete(id){//使用过滤器删除，需要运行npm install core-js@3.6.4命令才能使用filter过滤器this.todos=this.todos.filter((todo)=>{return todo.id!==id;});//传统的过滤删除方法// for (let index = 0; index < this.todos.length; index++) {//     if(this.todos[index].id===id){//         this.todos.pop(index);//     }// }},//全选or取消全选checkAllTodo(done){this.todos.forEach((todo)=>{todo.done=done;});},//清除所有已经完成的todoclearAllTodo(){this.todos=this.todos.filter((todo)=>{return !todo.done;});}}}
</script><style>/*base*/body {background: #fff;}.btn {display: inline-block;padding: 4px 12px;margin-bottom: 0;font-size: 14px;line-height: 20px;text-align: center;vertical-align: middle;cursor: pointer;box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);border-radius: 4px;}.btn-danger {color: #fff;background-color: #da4f49;border: 1px solid #bd362f;}.btn-danger:hover {color: #fff;background-color: #bd362f;}.btn:focus {outline: none;}.todo-container {width: 600px;margin: 0 auto;}.todo-container .todo-wrap {padding: 10px;border: 1px solid #ddd;border-radius: 5px;}
</style>

MyHeader.vue

<template><div class="todo-header"><input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="title" @keyup.enter="add"/></div>
</template><script>import {nanoid} from 'nanoid'export default {name:'MyHeader',props:['addTodo'],data() {return {title:''}},methods:{add(){//校验数据if(!this.title){alert("数据不能为空！");return;}//将用户的输入包装成一个todo对象const todoObj={id:nanoid(),title:this.title,done:false};//通知App组件去添加一个todo对象this.addTodo(todoObj);this.title='';//清空输入}}}
</script><style scoped>/*header*/.todo-header input {width: 560px;height: 28px;font-size: 14px;border: 1px solid #ccc;border-radius: 4px;padding: 4px 7px;}.todo-header input:focus {outline: none;border-color: rgba(82, 168, 236, 0.8);box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);}
</style>

MyItem.vue

<template><div><li><label><input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/><!-- 如下代码也能实现功能，但不太推荐，因为有点违反原则，因为修改了props --><!-- <input type="checkbox" v-model="todo.done"/> --><span>{{todo.title}}</span></label><button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button></li></div>
</template><script>export default {name:'MyItem',//声明接收todo对象props:['todo','checkTodo','todoDelete'],methods:{// 勾选or取消勾选handleCheck(id){this.checkTodo(id);},//删除一个todohandleDelete(id){if(confirm("确定删除吗?")){this.todoDelete(id);}}}}
</script><style scoped>/*item*/li {list-style: none;height: 36px;line-height: 36px;padding: 0 5px;border-bottom: 1px solid #ddd;}li label {float: left;cursor: pointer;}li label li input {vertical-align: middle;margin-right: 6px;position: relative;top: -1px;}li button {float: right;display: none;margin-top: 3px;}li:before {content: initial;}li:last-child {border-bottom: none;}li:hover{background-color: #ddd;}li:hover button{display: block;}
</style>

MyList.vue

<template><div><ul class="todo-main"><!-- 记录详情组件 --><MyItem v-for="todoObj in todos" :key="todoObj.id" :todo="todoObj":checkTodo="checkTodo":todoDelete="todoDelete"></MyItem></ul></div>
</template><script>import MyItem from './MyItem.vue'export default {name:'MyList',components:{MyItem},props:['todos','checkTodo','todoDelete']}
</script><style scoped>/*main*/.todo-main {margin-left: 0px;border: 1px solid #ddd;border-radius: 2px;padding: 0px;}.todo-empty {height: 40px;line-height: 40px;border: 1px solid #ddd;border-radius: 2px;padding-left: 5px;margin-top: 10px;}
</style>

MyFooter.vue

<template><div class="todo-footer" v-if="total"><label><input type="checkbox" v-bind:checked="isAll" @click="checkAll"/></label><span><span>已完成{{doneTotal}}</span> / 全部{{total}}</span><button class="btn btn-danger" @click="clearAll">清除已完成任务</button></div>
</template><script>export default {name:'MyFooter',props:['todos','checkAllTodo','clearAllTodo'],// 计算属性computed:{//完整书写方式total:function(){return this.todos.length;},//计算属性的简写方式doneTotal() {//原始的统计方法// let count=0;// for (let index = 0; index < this.todos.length; index++) {//     if (this.todos[index].done) {//         count++;//     }// }// return count;//使用原型的reduce条件统计方法，第一个参数为函数体，第二个为统计开始值const count=this.todos.reduce((pre,todo)=>{return pre+(todo.done? 1 : 0);},0);return count;},isAll(){return this.doneTotal===this.total&&this.total>0;//计算属性是可以嵌套的}},methods:{checkAll(event){console.log(event.target.checked);this.checkAllTodo(event.target.checked);},clearAll(){this.clearAllTodo();}}}
</script><style scoped>/*footer*/.todo-footer {height: 40px;line-height: 40px;padding-left: 6px;margin-top: 5px;}.todo-footer label {display: inline-block;margin-right: 20px;cursor: pointer;}.todo-footer label input {position: relative;top: -1px;vertical-align: middle;margin-right: 5px;}.todo-footer button {float: right;margin-top: 5px;}
</style>

浏览器本地存储

浏览器本地存储是一种在用户的本地浏览器中存储数据的机制，以便在后续访问同一网站或应用程序时能够更快地加载和显示内容，同时也可以用于在会话之间保持数据。常见的浏览器本地存储技术包括：

Cookies（Cookie）：Cookies 是一种小型文本文件，可以存储在用户的计算机上。它们通常用于存储少量的数据，如用户登录信息、会话标识等。Cookies 可以在服务器和浏览器之间传递数据，但存储容量有限（通常不超过4KB）。
Web Storage：Web Storage 提供了两种存储数据的方式：localStorage 和 sessionStorage。
- localStorage：用于长期存储数据，数据在浏览器关闭后仍然保留。
- sessionStorage：用于临时会话数据存储，数据在会话结束后被清除。
IndexedDB：IndexedDB 是一种低级别的数据库系统，允许你在浏览器中存储大量结构化数据。它提供了强大的查询和事务支持，并适用于需要离线访问或较大数据集的应用程序。
Cache API：Cache API 是一个用于存储和检索网络请求和响应的浏览器缓存系统。它允许开发者明确地控制哪些资源被缓存以及缓存的生命周期，通常用于提高网页性能和离线访问。
Service Worker：Service Worker 是一个在浏览器后台运行的脚本，它可以拦截和处理网络请求，实现高级的缓存策略，包括离线访问和推送通知。它通常与Cache API一起使用。

这些本地存储技术允许开发者在浏览器中存储和管理数据，以提高应用程序的性能、响应速度和离线访问能力。选择适当的本地存储技术通常取决于应用程序的需求和数据的类型。

需要注意的是，由于本地存储是存储在用户计算机上的数据，开发者需要处理数据的过期、清理以及安全性等问题，以确保用户数据的完整性和隐私安全。

localStorage

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>localStorage</title></head><body><h2>localStorage</h2><button onclick="saveData()">点我保存数据</button><button onclick="readData()">点我读取数据</button><button onclick="deleteData()">点我删除数据</button><button onclick="deleteAllData()">点我清空数据</button><script type="text/javascript">let p = {name:'张三',age:18};console.log(p.toString());function saveData(){window.localStorage.setItem('msg','你好啊本地存储');//将数据存进浏览器的本地缓存中window.localStorage.setItem('msg2',666);window.localStorage.setItem('person',JSON.stringify(p));//将对象类型转成json字符串类型}function readData(){console.log(localStorage.getItem('msg'));console.log(localStorage.getItem('msg2'));let result=localStorage.getItem('person');console.log(JSON.parse(result));//将json字符串类型解析成object类型}function deleteData(){localStorage.removeItem('msg');//移除数据}function deleteAllData(){localStorage.clear();//清空数据}</script></body>
</html>

sessionStorage

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>sessionStorage</title></head><body><h2>sessionStorage</h2><button onclick="saveData()">点我保存数据</button><button onclick="readData()">点我读取数据</button><button onclick="deleteData()">点我删除数据</button><button onclick="deleteAllData()">点我清空数据</button><script type="text/javascript">let p = {name:'张三',age:18};console.log(p.toString());function saveData(){window.sessionStorage.setItem('msg','你好啊本地存储');//将数据存进浏览器的本地缓存中window.sessionStorage.setItem('msg2',666);window.sessionStorage.setItem('person',JSON.stringify(p));//将对象类型转成json字符串类型}function readData(){console.log(sessionStorage.getItem('msg'));console.log(sessionStorage.getItem('msg2'));let result=sessionStorage.getItem('person');console.log(JSON.parse(result));//将json字符串类型解析成object类型}function deleteData(){sessionStorage.removeItem('msg');//移除数据}function deleteAllData(){sessionStorage.clear();//清空数据}</script></body>
</html>