todolist-localstorage封装

最新推荐文章于 2023-01-01 14:46:19 发布
最新推荐文章于 2023-01-01 14:46:19 发布
阅读量218 收藏
点赞数
分类专栏： 案例 window.addEventListener('hashchange 文章标签： javascript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Isabeldeng/article/details/109865113
版权
本文介绍如何使用JavaScript进行本地存储的封装，并结合Vue.js实现TodoList应用，保存用户数据到浏览器的localStorage中，确保数据在页面刷新后仍能持久化。
摘要由CSDN通过智能技术生成 
<body>
    <div id="box">
        <div class="text">
            <input type="text" placeholder="回车即可添加内容" v-model="newOne.title" @keyup.enter="add">
        </div>
        <p>
            任务总数:{{arr.length}}个,还有{{noCheck}}个任务没有完成;[<span class="wc" @click="complete()">删除已完成</span>]
        </p>
        <p v-show="!arr.length">还没有任务,快添加一个吧</p>  <br>
        <a href="#all"       :class="{on:visibility == 'all'}">全部任务</a>
        <a href="#unfinish" :class="{on:visibility == 'unfinish'}">未完成</a>
        <a href="#finished" :class="{on:visibility == 'finished'}">已完成</a>
        <h3>任务列表</h3>
        <ul>
            <li v-for="(item, index) in filterArr" :key="item.id">
                <input type="checkbox" v-model="item.isChecked">
                <span @dblclick='goEdit(item)' v-show="!item.edit">{{item.title}}</span>
                <input type="text" v-show="item.edit" v-model="item.title" v-focus="item.edit"
                    @keyup.enter="item.edit=false" @keyup.esc="goEnter(item)">
                <button @click="del(item.id)">X</button>
            </li>
        </ul>
    </div>
    <script src="vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#box",
            data: {
                arr: [ ],
                newOne: {id:Date.now(), title: '', isChecked: false, edit: false },
                oldtitle: "",
                mytitle: "",
                visibility: 'all' },//通过hash变化赋值给该属性,在计算属性里
              methods: {
                goEdit(item) {
                    this.oldtitle = item.title
                    item.edit = true
                },
                goEnter(item) {
                    item.title = this.oldtitle;
                    oldtitle = ''
                    item.edit = false;
                },
                add() {
                    if (this.newOne.title) {
                        this.arr.push(this.newOne)
                        this.newOne = {id:Date.now(), title: '', isChecked: false, edit: false }
                    } else {
                        return;   } },
                del(id) {
                   let index= this.arr.findIndex((item) => {
                        return item.id==id  });
                    this.arr.splice(index, 1)
                },
                complete() {
                    let temp = this.arr
                    this.arr = []
                    this.arr = temp.filter(item => {
                        return !item.isChecked
                    })
                }
                },
            directives: {
                focus: function (el, bind) {
                    if (bind.value) {
                        el.focus()
                    }
                }
            },
            computed: {
                noCheck: function () {
                    return this.arr.filter((item) => {
                        return !item.isChecked
                    }).length
                },
            filterArr: function () {//list根据hash值 过滤出新的数组
                if (this.visibility == 'unfinish') {
                    return this.arr.filter((item) => {
                        return !item.isChecked })
                }else if (this.visibility == 'finished') {
                    return this.arr.filter((item) => {
                        return item.isChecked })
                }else{ return this.arr } }   }, });
        function watchHashChange() {
            let myhash = location.hash.slice(1)
             console.log('myhash:'+location.hash);//#all/unfinish/finish
            vm.visibility = myhash  }
             watchHashChange()//一打开页面调用
             window.addEventListener('hashchange', watchHashChange)
    </script>
</body>

</html>

本地存储封装

  <script>
        // 封装两个方法：localStorage存储和获取
        let store = {
            save(key, value) {
                localStorage.setItem(key, JSON.stringify(value))
            },
            fetch(key) {
                if (JSON.parse(localStorage.getItem(key))) {
                    return JSON.parse(localStorage.getItem(key))
                } else {
                    return [];//第一次没有存储数据时
                }
            },
        }
        // let listDefault = [====>添加默认项,如果不需要不写即可,一旦添加不删除则不会消失
        //     { title: "吃饭", isChecked: false, edit: false },
        //     { title: "逛街", isChecked: false, edit: false } ]
        //  store.save('doArr',listDefault )
        let list = store.fetch('doArr')
        console.log(list);
        new Vue({
            el: "#box",
            data: {
                arr: list,
                oldtitle: "",
                mytitle: "",//不可以newOne.title,否则每一个新添的title不是独立的
            },
            methods: {
                goEdit(item) {
                    this.oldtitle = item.title
                    item.edit = true
                },
                goEnter(item) {
                    item.title = this.oldtitle;
                    oldtitle = ''
                    item.edit = false;
                },
                add() {
                    let newOne = { title: this.mytitle, isChecked: false, edit: false }//只能在函数内声明新添加的对象
                    if (this.mytitle) {
                        this.arr.push(newOne)
                        this.mytitle = ""
                    } else {
                        return;
                    }
                },
                del(i) {
                    this.arr.splice(i, 1)
                },
                complete() {
                    let temp = this.arr
                    this.arr = []
                    this.arr = temp.filter(item => {
                        return !item.isChecked
                    })

                }
            },
            directives: {
                focus: function (el, bind) {
                    if (bind.value) {
                        el.focus()
                    }
                }
            },
            computed: {
                noCheck: function () {
                    return this.arr.filter((item) => {
                        return !item.isChecked
                    }).length
                }
            },
            watch: {
                // 只监控对象的变化，勾选后，刷新没有勾选效果
                // arr: function(val){
                //     store.save('todolist',val)
                // 深度监控：监控对象和对象属性的变化，勾选刷新依然有勾选效果
                //如果 `arr` 发生改变，这个函数就会运行
                arr: {
                    handler: function (val) {
                        store.save('doArr', val)
                    },
                    deep: true  } },  })
    </script>
    ```
l-Isabel
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
todoList:创建任务列表并将其保存到localStorage
04-06
待办事项清单 创建任务列表并将其保存到localStorage。
vue todolist 封装localstorage
aifan2109的博客
11-23 99
1 //封装操作localstorage本地存储的方法 模块化的文件 2 3 4 // nodejs 基础 5 6 7 8 var storage={ 9 10 set(key,value){ 11 12 localStorage.setItem(key, JSON.stringify(value))...
# localStorage存储TODOLIST
qq_40029828的博客
04-10 198
1、html <!doctype html> <html lang="en" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width...
6.todolist循环增删数据，方法的封装和使用，页面初始化函数
zyf_baby的博客
05-20 108
文章目录内容详细例子1.Todolist组件2.方法的封装和使用 内容 通过案例练习使用 1.循环数据，增删数据 2.常用方法的封装和使用-storage 3.页面初始化时的函数componentDidMount(){} 详细例子 1.Todolist组件 // 内容：封装storage的方法 import React from 'react'; import storage from '../model/storage' class Todolist extends React.Component {
经典案例todolist做法 , localStorage 本地数据存储
小白的博客
07-23 593
<header> <section> <label for="title">ToDoList</label> <input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" /> </section> ...
Vanilla-Js-TodoList-Meski
02-09
3. 数据存储：可能使用`localStorage`或`sessionStorage`来持久化存储待办事项，以便在页面刷新后还能保留数据。 4. 函数与逻辑：通过定义函数封装重复代码，用条件语句（if...else）和循环（for、while）处理业务...
ToDoList-Anjani:第一个ToDoList应用
05-11
- 数据存储：可能使用了浏览器的本地存储（localStorage）来保存用户的待办事项，即使页面刷新也不会丢失数据。 - 函数封装：将功能分解为多个独立的函数，便于代码的复用和维护。 - 条件判断：用于处理任务的完成...
TodoList-VanilaJs:使用Vanila JavaScript的基本TodoList
05-08
【标题】"TodoList-VanilaJs:使用Vanila JavaScript的基本TodoList" 是一个使用纯JavaScript（也称为Vanilla JS）实现的简单待办事项应用项目。这个项目旨在教授开发者如何不依赖任何库或框架，仅用原生JavaScript...
todoList-practice：待办事项列表的Javascript更新
02-09
这可能涉及到使用`localStorage`或`sessionStorage`对象，它们允许我们在浏览器端存储键值对数据，而无需服务器支持。 4. **函数与闭包**：为了封装和重用代码，JavaScript中的函数是必不可少的。在这个项目中，...
Todo-list-JS:使用LocalStorage在JavaScript中做一个简单的待办事项清单
05-02
欢迎来到待办事项清单 这是一个基于JavaScript的小型项目，可让LocalStorage的功能正常使用。 我们如何将数据保存到localStorage并删除它们。 另外，我们使用JS的DOM脚本和事件监听器功能。 对于一个想法，请参阅： Still we also have to work more on this to get the proper completed task section
todo-list-localstorage:只需几个步骤即可使用本地存储的待办事项列表
04-05
使用本地存储的待办事项列表 我的第一个Github项目:)
todo_list__app_react:React 上的应用“待办事项列表”，将数据保存到 localStorage
08-03
应用程序使用 ， 并将数据保存到 localStorage。 安装 npm install 运行http服务器 npm start
本地存储与todolist-01
一只认学的程序猿
09-29 127
本地存储 本地存储，通俗的讲，就是将web页面中的数据存放到本地。 本地存储分为两类：localStorage与sessionStorage localStorage： 可以永久存放到本地，但只要清除浏览器缓存，就可以被删除。 sessionStorage： 本地存放的数据当次有效，只要将页面关闭，数据就会被清除。 使用本地存储无非就是要做这几件事：存数据，取数据，清除数据。 localStorage: 最简单的测试方法，在页面1中： <body> <script>
js localStorage实现简易todolist网页
qq_44827640的博客
10-20 129
html <body> <div id="add"> <input type="search" name="" id="search"> </div> <h1>todoList</h1> <div id="todoList"> <p></p> <ul id="todoUl"></ul> &l
div 可编辑_Todo List: 新增编辑任务，localStorage + Vuex实现本地存储 - 第二章
weixin_39683241的博客
11-22 90
前言在第一章中，我们的Todo List已经初现锥形，本章节我们对页面优化，同时让数据实现本地存储。主要用到localStorage + Vuex来实现页面交互和存储功能。本次《todo list: Vue待办事项任务管理》，分为一下章节，有兴趣的同学可以持续关注。第一章: 初识（项目搭建、基本功能组件实现） 第二章: 数据动态化处理（localStorage + Vuex），可新增，可编辑 第三...
JQuery学习笔记“todolist”实战案例（对本地存储数据的操作）
heartmvcom的博客
06-24 481
最近学习了一个JQuery实战案例：todolist。主要是对localStorage本地存储数据的增、删、改、查操作与页面的渲染。综合性很强。 现在把这个案例作为笔记放在网络上，就算忘记了，也可以随时联网打开，把源码复制过来，根据需求更改使用。有需要的朋友也可以参考一下哦。 <!doctype html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src=
TODO：封装RadioGroup的初始化形式
hugoshine的专栏
06-13 683
TODO：将RadioGroup的初始化形式封装成类似ListView那样
Vue--》实现todo-list组件的封装与使用
ztK63LrD的博客
01-01 1191
App根组件拿到index值，通过计算属性来判断按钮点击时的activeIndexBtn的值，来呈现不同的内容。在输入框输入信息之后，会加载到数组里面，在底部的按钮进行选择已完成和未完成的情况。给表单添加提交按钮，将input输入框输入的数据通过自定义事件传递给父组件身上。通过自定义事件，将 index 的值传递给根组件App上。至此，todolist的基本功能已经实现。
Vue如何封装一个TodoList
qq_45750154的博客
06-11 182
本篇文章给大家详细介绍一下Vue封装一个TodoList的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 使用Vue封装一个简易的Todolist的小案例. 同时加入了浏览器本地缓存的技术手段. 浏览器本地缓冲: 前提： 一般我们定义的变量，或者用Vuex保存的数据， 当浏览器进行了一个刷新 那么这个数据就会丢失, 这样就做不出历史记录的效果了， 但是， 使用浏览器缓存就可以帮助我们解决这个问题… 浏览器缓存分为二种 sessionStorage 和 localSt
grpc todolist
最新发布
01-08
Todolist是一个常见的应用程序，用于记录和管理待办事项。使用gRPC可以很方便地实现一个todolist应用程序，实现客户端和服务器之间的通信和数据交互。 在一个基于gRPC的todolist应用程序中，客户端可以向服务器发送...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值