1 

* {
    box-sizing: border-box;
}

body {
    background-color: rgb(223, 255, 237);
    background:radial-gradient(rgb(223, 255, 237), rgb(196, 98, 98));
    background-repeat: repeat;
}

#container {
    border-radius: 15px;
    margin: 200px auto;
    text-align: center;
    width: 490px;
    border: 2px solid rgb(126, 45, 45);
    height: 580px;
    background:radial-gradient(rgb(223, 255, 237), rgb(196, 98, 98));
    box-shadow: 0px 0px 20px 10px #8a3535; 
}

p { margin-left: 5px; 
    width: 100%;
    font-family: 'Stardos Stencil';
    font-size: 24px;
    color:rgb(109, 0, 0); 
    letter-spacing: 15px; 
}

::placeholder {
    color: rgb(94, 17, 17);
    border-style: none;
    opacity: 0.6;
    font-size: 16px;
    height: 31px;
}

input[type="text"]{
    border: none;
    height: 31px;
    width: 200px;
}

#list::-webkit-scrollbar-thumb{
    background:  rgb(196, 98, 98);
}

::-webkit-scrollbar {
    width: 5px;
    
}

#clr {
    width: 50px;
    height: 31px;
    text-decoration: none;
    background-color: rgb(184, 36, 36);
    border: none;
    cursor: pointer;
    color: white;
}

#btn {
    width: 60px;
    height: 31px;
    text-decoration: none;
    background-color: rgb(152, 230, 158);
    border: none;
    cursor: pointer;
}

.line {
    border: 1px solid rgb(184, 36, 36);
}

/*list items*/

.delCrss {
    float: right;
    color:rgb(104, 36, 36);
    font-size: 18px;
    cursor: pointer;
    margin-right: 12px;
    
}

#list {
    margin-top: 25px;
    padding-left: 0px;
    Margin-left: 87px;
    overflow: auto;
    height: 57%;
    width: 310px;
    /*border: 1px solid rgb(107, 25, 25);*/
    text-align: left;
}

img {
    width: 18px;
    height: 18px;
}

ul {
    margin:0;
    padding-left: 0;
}

.item {
    font-size: 18px;
    Color: rgb(122, 0, 0);
}

li {
    list-style-type: none;
}

.check {
    margin-right: 10px;
    transform: scale(1.4);
}

.checked {
    text-decoration: line-through;
}
.unchecked{
    text-decoration: none;
}

/* delete buttons*/

#del {
    margin-top: 20px;
    width: 310px;
    height: 30px;
    margin-left: 87px;
}

#delLast {
    text-decoration: none;
    background-color: rgb(184, 36, 36);
    cursor: pointer;
    height: 27px;
    border: 1px solid  rgb(184, 36, 36);
    float: left;
    color: white;
}

#delAll {
    text-decoration: none;
    background-color:  rgb(184, 36, 36);
    border: 1px solid  rgb(184, 36, 36);
    height: 27px;
    cursor: pointer;
    float: right;
    color: white;
}

#date {
    margin-top: 15px;
    font-family: 'Stardos Stencil';
    color: rgb(109, 0, 0);
}

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href='https://fonts.googleapis.com/css?family=Stardos Stencil' rel='stylesheet'>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <title>Document</title>
    </head>
    <body>
    <div id="container">
         <p>Things To-Do</p>
        <input type="text" id="text" placeholder=" write here...." autocomplete="off" autofocus><button             id="btn">Submit</button><button id="clr">clear</button>

          <div id="list">
            <ul id="ul">
            </ul>
          </div>

          <div id="del">
            <button id="delLast">delete last item</button><button id="delAll">delete all</button>
          </div>
          <div id="date"></div>
    </div>

    <script src="app7.js"></script>

    </body>
    </html>

一个简单的待办事项应用程序有一个问题，当在本地存储中选中复选框时，我无法存储直通。重新加载或刷新后，复选框保持选中状态，但线路已消失。我希望该线路在页面重新加载或刷新后持续存在。我不知道如何将直通功能与恢复功能或任何其他方式结合起来。

const input = document.getElementById('text');
const list = document.getElementById('list');
var ul = document.getElementById('ul');
const clear = document.getElementById('clr');
const submit = document.getElementById('btn');
const delAll = document.getElementById('delAll');
const delLast = document.getElementById('delLast');
let checkBox = document.querySelector('input[type="checkbox"]');
let data = localStorage.getItem("TODO");
let todo = input.value;
let listItems;
let id;

// Load list if in local storage
if(data){
listItems = JSON.parse(data);
id = listItems.length;                    
loadList(listItems);
restore()

console.log(listItems)
}else{
listItems=[];
id = 0;
}

function loadList(data){
 data.forEach( (el) => {
        html = `<li class="item" id="${el.id}">
                <input type="checkbox" job="complete" name="chbx" 
                 class="check" store="${el.id}"></input>
                <span class="textItem">${el.todo}</span>
                <span><img src="delicon.png" class="delCrss" job="delete"> 
                <span>
                <hr class="line"></li>`;
  ul.insertAdjacentHTML('beforeend', html);
  id++
    })
 }

 //Make item
 function addItem(todo) {

 var date  = new Date()
 var id = "" + date.getHours() + date.getMinutes() + date.getSeconds() + 
 date.getMilliseconds()
    if(todo){
         html = `<li class="item" id="${id}">
                 <input type="checkbox" job="complete" class="check" 
                     name="chbx" store="${id}"></input>
                 <span class="textItem">${todo}</span>
                 <span><img src="delicon.png" class="delCrss"job="delete"> 
                  <span>
                 <hr class="line"></li>`;

    ul.insertAdjacentHTML('beforeend', html);

    listItems.push({
        todo: input.value,
          id: id
          }) 
          id++   
    localStorage.setItem("TODO", JSON.stringify(listItems));
    }
    input.value = "";
  }

// Add input to list by pressing enter key 
document.addEventListener('keyup', function(e){
todo = input.value
if(e.keyCode === 13 && todo){
    addItem(todo)
}else if(e.keyCode === 13 && todo === ""){
    alert('Please enter valid data!');
 }
 }) 

  //Add item to list use submit button
  submit.addEventListener('click', function(e) {
     todo = input.value
       if(todo){
       addItem(todo);
   }else if(todo === ""){
    alert("Please enter valid data!");
    }    
  })


// Line-through if checked
   ul.addEventListener('click', function(e) {
      var elem = e.target
      if(elem.checked == true){
         elem.parentNode.classList.add('checked');
      }else if( elem.checked == false){
         elem.parentNode.classList.remove('checked');
      }
    },false);

// Store checkbox states
   var boxes = document.querySelectorAll("input[type='checkbox']");

   for (var i = 0; i < boxes.length; i++) {
   var box = boxes[i];
   if (box.hasAttribute("store")) {
    setupBox(box);
       }
   }

   function setupBox(box) {
      var storageId = box.getAttribute("store");
      var oldVal    = localStorage.getItem(storageId);
      box.checked = oldVal === "true" ? true : false;

   box.addEventListener("change", function() {
      localStorage.setItem(storageId, box.checked); 
      });
   }
4

1 回答 1

0

嗨，这里是一个带有 localStorage 的 jsfiddle，有些人记得我的复选框jsfiddle ，基本的代码很简单：

  • 首先，您必须将数据保存在本地存储中，只需提交带有一些数据的表单
  • 如果您选中记住我并重新加载页面，则代码填充字段，如果不是，则显示数据

  • 如果您想保存更改，您必须再次提交

    如果您想在代码的这一部分中为您的复选框添加一些逻辑，您还可以添加一些逻辑：

     if(data.remember != undefined && data.remember){
document.getElementById("txtUser").value = data.username;
document.getElementById("txtPass").value = data.password;
//you can add a validation for you data.remember here which is your checbox checked value
document.getElementById("chkremember").checked = data.remember;
 }else{
 document.getElementById("result").innerHTML = localStorage.getItem("json");
 }

希望能帮助到你

于 2019-08-28T17:53:50.187 回答