原生JS加localStorage实现数据持久化的ToDoList

已于 2022-04-30 16:28:32 修改
阅读量450 收藏 1
点赞数
分类专栏： JavaScript 文章标签： javascript css3 css
于 2022-01-14 22:38:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nxcniuxiangchen/article/details/122503741
版权

预览

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        font-size: 16px;
        background: #cdcdcd;
      }

      header {
        height: 50px;
        background: #333;
        background: rgba(47, 47, 47, 0.98);
      }

      section {
        margin: 0 auto;
      }

      label {
        float: left;
        width: 100px;
        line-height: 50px;
        color: #ddd;
        font-size: 24px;
        cursor: pointer;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      }

      header input {
        float: right;
        width: 60%;
        height: 24px;
        margin-top: 12px;
        text-indent: 10px;
        border-radius: 5px;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24),
          0 1px 6px rgba(0, 0, 0, 0.45) inset;
        border: none;
      }

      input:focus {
        outline-width: 0;
      }

      h2 {
        position: relative;
      }

      span {
        position: absolute;
        top: 2px;
        right: 5px;
        display: inline-block;
        padding: 0 5px;
        height: 20px;
        border-radius: 20px;
        background: #e6e6fa;
        line-height: 22px;
        text-align: center;
        color: #666;
        font-size: 14px;
      }

      ol,
      ul {
        padding: 0;
        list-style: none;
      }

      li input {
        position: absolute;
        top: 2px;
        left: 10px;
        width: 22px;
        height: 22px;
        cursor: pointer;
      }

      p {
        margin: 0;
      }

      li p input {
        top: 3px;
        left: 40px;
        width: 70%;
        height: 20px;
        line-height: 14px;
        text-indent: 5px;
        font-size: 14px;
      }

      li {
        height: 32px;
        line-height: 32px;
        background: #fff;
        position: relative;
        margin-bottom: 10px;
        padding: 0 45px;
        border-radius: 3px;
        border-left: 5px solid #629a9c;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
      }

      ol li {
        cursor: move;
      }

      ul li {
        border-left: 5px solid #999;
        opacity: 0.5;
      }

      li a {
        position: absolute;
        top: 2px;
        right: 5px;
        display: inline-block;
        width: 14px;
        height: 12px;
        border-radius: 14px;
        border: 6px double #fff;
        background: #ccc;
        line-height: 14px;
        text-align: center;
        color: #fff;
        font-weight: bold;
        font-size: 14px;
        cursor: pointer;
      }
      @media screen and (max-device-width: 620px) {
        section {
          width: 96%;
          padding: 0 2%;
        }
      }

      @media screen and (min-width: 620px) {
        section {
          width: 600px;
          padding: 0 10px;
        }
      }
    </style>
  </head>
  <body>
    <header>
      <section>
        <form action="" id="form" onclick="">
          <label for="title">ToDoList</label>
          <input
            type="text"
            id="title"
            name="title"
            placeholder="添加ToDo"
            required="required"
            autocomplete="off"
          />
        </form>
      </section>
    </header>
    <section>
      <h2>正在进行 <span id="todocount"></span></h2>
      <ol id="todolist" class="demo-box"></ol>
      <h2>已经完成 <span id="donecount"></span></h2>
      <ul id="donelist"></ul>
    </section>
    <script>
      loadData();
      let input = document.querySelector("input");
      let ollist = document.querySelector("#todolist");
      let ullist = document.querySelector("#donelist");
      // 按回车键将输入框中的内容添加到<正在进行>中
      input.onkeydown = function (e) {
        if (e.keyCode === 13) {
          //如果输入框内容为空就直接返回
          if (input.value == "") {
            return;
          } else {
            let todolist = {
              title: input.value,
              done: false,
            };
            let arr = getData();
            arr.push(todolist);
            saveData(arr);
          }
        }
      };

      //获取数据并储存
      function getData() {
        let data = window.localStorage.getItem("todo");
        if (data) {
          return JSON.parse(data);
        } else {
          return [];
        }
      }
      //添加数据到列表
      function loadData() {
        let data = getData();
        let ollist = document.querySelector("#todolist");
        let ullist = document.querySelector("#donelist");
        let todoCount = document.querySelector("#todocount");
        let doneCount = document.querySelector("#donecount");
        let todocount = 0;
        let donecount = 0;
        //删除子节点的方法
        let childs = ollist.childNodes;
        for (let i = childs.length - 1; i >= 0; i--) {
          ollist.removeChild(childs[i]);
        }
        let ulchilds = ullist.childNodes;
        for (let i = ulchilds.length - 1; i >= 0; i--) {
          ullist.removeChild(ulchilds[i]);
        }
        data.forEach((item, index) => {
          let li = document.createElement("li"); //生成li
          li.innerHTML =
            "<input type='checkbox' class='change'/><p id='p" +
            index +
            "'>" +
            item.title +
            "</p><a href='javascript:;' id=" +
            index +
            ">-</a>";
          if (item.done) {
            //已完成
            ullist.insertBefore(li, ullist.children[0]);
            li.children[0].checked = "checked";
            donecount++;
          } else {
            //正在进行中
            ollist.insertBefore(li, ollist.children[0]);
            todocount++;
          }
          todoCount.innerText = todocount;
          doneCount.innerText = donecount;
        });
      }
      //储存数据
      function saveData(arr) {
        return window.localStorage.setItem("todo", JSON.stringify(arr));
      }
      //删除数据
      function removeData() {
        ollist.addEventListener(
          "click",
          function (e) {
            if (e.target.nodeName === "A") {
              //找到对应的元素节点属性
              let index = e.target.getAttribute("id");
              console.log(index);
              let data = getData();
              data.splice(index, 1);
              saveData(data);
              loadData();
            }
          },
          false
        );
      }
      removeData();

      //编辑数据
      function editData() {
        ollist.addEventListener("click", function (e) {
          if (e.target.nodeName === "P") {
            let id = e.target.getAttribute("id");
            let p = document.getElementById(id);
            console.log(p);
            //替换p中的innerHTML
            let title = p.innerHTML;
            p.innerHTML =
              "<input type='text' value='" + title + "' id=input" + id + "'/>";
            //失去焦点的时候
            let input = document.getElementById("input" + id);
            input.select();
            input.addEventListener(
              "blur",
              function () {
                if (input.value != "") {
                  p.innerHTML = input.value; //把input的value值赋值给p.innerHTML储存新的p.innerHTML
                  let data = getData();
                  let index = id.substring(1); //获取当前修改的索引值
                  data[index].title = p.innerHTML;
                  saveData(data); //储存新的p.innerHTML
                  loadData();
                } else {
                  return;
                }
              },
              false
            );
          }
        });
      }
      editData();
      //切换数据
      function changeData() {
        ollist.addEventListener("click", function (e) {
          if (e.target.className === "change") {
            console.log(e.target);
            if (e.target.nextElementSibling.nextElementSibling) {
              console.log(e.target.nextElementSibling);
              let id =
                e.target.nextElementSibling.nextElementSibling.getAttribute(
                  "id"
                );
              let data = getData();
              data[id].done = true;
              saveData(data); //储存新的p.innerHTML
              loadData();
            }
          }
        });
        ullist.addEventListener("click", function (e) {
          if (e.target.className === "change") {
            let id =
              e.target.nextElementSibling.nextElementSibling.getAttribute("id");
            console.log(id);
            let data = getData();
            data[id].done = false;
            saveData(data); //储存新的p.innerHTML
            loadData();
          }
        });
      }
      changeData();
    </script>
  </body>
</html>
无响应乱码元素
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目持久化存储数据的实现代码
12-10
方式一、使用localStorage在数据存储 1、要在浏览器刷新的时候重新存储起来 if (window.localStorage.getItem(authToken)) { store.commit(types.SETLOANNUMBER, window.localStorage.getItem('loanNumber')); } 方式二、使用vue-cookie插件来做存储 1、参考地址传送门 2、安装包 npm install vue-cookie --save 3、在store中存储起来 import Vue from 'vue'; import Vuex from 'vue
JavaScript使用localStorage存储数据
10-16
主要为大家详细介绍了JavaScript使用localStorage存储数据，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
如何使用localstorage代替cookie实现跨域共享数据问题
01-19
一，背景   因为网站系统的日益庞大，不同域名业务，甚至不同合作方网站的cookie可能或多或少需要进行共享使用，遇到这个情况的时候，大家一般想到的是使用登录中心分发cookie状态再进行同步进行解决，成本较高而且实施起来比较复杂和麻烦。 因为cookie在跨域的情况下，浏览器根本不允许互相访问的限制，为了突破这个限制，所以有了以下这个实现方案，使用postmessage和localstorage进行数据跨域共享。 原理比较简单，但是遇到的坑也不少，这里梳理一下，做个备份。 二，API设计 背景中说过我们使用localstorage来代替cookie，本身localstorage和cookie
原生JavaScript实现todolist功能
11-28
该项目主要可以练习js操控dom，事件，事件触发之间的逻辑关系，以及如何写入缓存，获取缓存。 主要功能： 将用户输入添加至待办项 可以对todolist进行分类，用户勾选即将待办项分入已完成组 todolist的每一项可删除和编辑 将用户输入数据写入localStorage本地缓存，实现对输入数据的保存 可以清楚域名下本地缓存，并清空所有todolist项 具体功能的实现 HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>todolist-prime</title
JavaScript LocalStorage 完整指南
p1967914901的博客
09-29 3660
对于大多数 web 浏览器，提供了在浏览器中存储键值对的机制。它通常分为和，两者之间的主要区别是浏览器存储数据的时间。使用，。但是，中的数据会一直保存到清除为止。特性在许多用例中都是有帮助的。本文将详细介绍及其工作原理，以便你可以在应用程序中使用它。
JS中localStorage的使用
Demolist的博客
10-30 2833
理论上来说是永久有效的，即不主动清空的话就不会消失，即使保存的数据超出了浏览器所规定的大小，也不会把旧数据清空而只会报错localstorage为标准的键值对（Key-Value）的数据类型，简单但也易扩展，只要以某种编码方式把想要存储进localstorage的对象给转化成字符串，就能轻松支持。
localStorage持久化存储的实现方式
Betty_666的博客
11-21 360
localStorage的实现方式
【react——小技巧】持久化数据LocalStorage
Akukudeteng的博客
09-05 645
例如：持久化用户名 用户输入用户名，然后我们把用户名保存到浏览器的 LocalStorage 当中，当页面加载的时候再从 LocalStorage 把之前保存的用户名显示到用户名输入框当中。这样用户就不用每次都输入用户名了，用户的输入体验就好很多。 我们监听用户名输入框失去焦点的事件 onBlur： ... <input value={this.state.username} onBlur={this.handleUsernameBlur.bind(this)}
原生JavaScript实现本地存储（localStorage）和会话存储（sessionStorage）
yzq0820的博客
08-01 2376
本地存储和会话存储的目的，是将所输入的文件存入到浏览器中，在需要的时候，直接调用，但是本地存储和会话存储有着一定的区别，本地存储，在不主动删除的情况下,会一直保留在浏览器中，会话存储是，当前保存的内容，页面刷新还会保留在浏览器中，但是关闭页面在打开时，会发现没有数据了。这是他们两的用处和区别。......
JS中localStorage的简单使用
旧港听风
05-12 2614
在前端开发过程中，对于数据的缓存处理这块也是非常重要的操作，缓存数据可以解决很多业务需求，而且在实际开发过程中无处不在的数据缓存操作，常用的需要缓存的操作无所不在，而且本地存储数据也是一种非常常用的需求，实现的方法也很多，作为前端开发都很熟悉的cookie，但是cookie的缺点：读写困难、容量有限的问题也是很明显的，localStorage的功能主要就是用来替代cookie的，那么本文就来分享一下好用的本地存储方法：localStorage的使用。 localStorage定义 localStorage是
todolist 实现数据持久化
qq_45222993的博客
11-28 205
1.ng g servise 创建一个服务 2.在app…ts 中引入，然后初始化 3.当你想要使用的时候，在那个组件中引入 4. 封装storageService 5. 6. 先是6的set,再是5 的ngOnInit(){} 7.html代码 ...
7搜索历史记录和ToDoList的数据持久化的实现
那又怎样的博客
08-31 375
c
react 做todolist ， 数据持久化
it_varlue的博客
09-15 132
import{React,Component}from'react' import'./todos.css' classTodosextendsComponent{ state={ inputValue:'', todos:[ {title:'learnReact',done:false,id:Date.now()}, {...
js实现数据持久化
qq_33358062的博客
08-11 6608
在写js事件时，常常遇到点击一个事件，然后在若干时间以后需要知道最近一次点击的事件的结点。比如这里： 我点击树节点1，再点击tab2,然后我再来回切换tab,假如最后一次点击tab时在tab2上，这时，我希望点击另一个树节点2，但是这时传到后台没有所点tab的标记，自然不会将tab的值传到后台，就算在tab点击事件中设置了标记，在点击树节点时也会被临时销毁了，此时需要做的是点击tab时将
使用cookie或者localstorage做数据持久化及登录功能（40分钟视频在文末）
qq_30351747的博客
03-31 2494
使用cookie或者localstorage做数据持久化（40分钟视频在文末）
原生js方法购物车完整实现 利用localStorage
html5_javascript的博客
08-19 1368
利用localStorage实现 html页面3个分别是 productList 产品列表 details产品详情页 cartList购物车页面 1.productList.html 页面 <style> body,ul ,li{ padding: 0; margin: 0; } li{ list-style: none; } #prod
Android持久化js的localstorage
杨成勇
08-08 1907
当js存储数据到localstorage中时，kill掉app进程，webview会清空localstorage。 所以如果要重启app后，localstorage中的数据还有效，则必须持久化localstorage。 方法：将localstorage存到数据库中 mWebViewSettings.setDatabaseEnabled(true); String l
4.1 JavaScript-数据持久化
学习交流记录
05-25 1129
4.1 JavaScript-数据持久化
js—localstorage (本地存储）必知
mxjwxhn的博客
10-21 8785
HTML API localstorage 在浏览器的 API 有两个：localStorage 和sessionStorage，存在于 window 对象中：localStorage 对应 window.localStorage，sessionStorage 对应window.sessionStorage。localStorage 和 sessionStorage 的区别主要是在于其生存期。 基本用法 localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份loc
pinia实现数据持久化
最新发布
04-05
Pinia是一个基于Vue.js的状态管理库，它提供了一种简单而强大的方式来管理应用程序的状态。Pinia本身并不直接提供数据持久化的功能，但可以与其他库或技术结合使用来实现数据持久化。 一种常见的数据持久化方式是使用浏览器的本地存储机制，比如localStorage或sessionStorage。你可以在Pinia的actions中使用这些机制来将数据保存在浏览器中。例如，你可以在action中使用localStorage.setItem()方法将数据保存到localStorage中，使用localStorage.getItem()方法来获取数据。 另一种常见的数据持久化方式是使用后端服务器来存储数据。你可以在Pinia的actions中发送HTTP请求将数据保存到服务器上，或者从服务器上获取数据。你可以使用Axios等HTTP库来发送请求。 除了上述两种方式，还有其他一些库或技术可以用于数据持久化，比如IndexedDB、WebSQL、Firebase等。你可以根据具体需求选择适合的库或技术来实现数据持久化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值