时间戳

首页 > 解决方案 > 使用本地存储重新加载后如何使 todolist 保留

javascript - 使用本地存储重新加载后如何使 todolist 保留

问题描述

我编写了这么多代码，但不知道如何使用 localstorage，所以在重新加载/刷新时我不必在浏览器中丢失我的 todolist。

这是我已经使用 savetodos 功能将项目设置为本地存储的代码

 var form =  document.querySelector('form') 
    var ul = document.querySelector('ul') 
    var button =  document.querySelector('#button'); 
    var input =    
    document.querySelector('#item'); 
    var clear =    
    document.querySelector('#clear');
    var savedToDos = [] 
    //this makes list item 
    var liMaker = text => { 
    var li = document.createElement('li');   
    li.textContent = text; 
    ul.insertBefore(li, ul.childNodes[0]) 
    }    
    form.addEventListener('submit', function(e) { 
        e.preventDefault()
        liMaker(input.value)
        input.value = ''; }
    );
    
    clear.addEventListener('click', remove); 
    //function remove to remove list item
    function remove(){ 
        saveToDos(); 
        while (ul.firstChild) { 
            ul.removeChild(ul.firstChild); 
       }
    } 
    function saveToDos() { 
         var items = 
          ul.getElementsByTagName("li"); 
         for (var i = 0; i < items.length; ++i) { 
                  savedToDos.push(
                  items[i].innerHTML); 
    }
              
    localStorage.setItem('savedValues', savedToDos); 
    }
 <div class='container'> 
         <h1> New  todo list</h1> 
            <form>
                     <input type='text' id='item'     
                     required> 
               <ul id="myList"></ul> 
                <button id='button'>add</
                     button> </form> 
                <button id="clear">Clear</
                button> 
    </div>

标签： javascripthtml

解决方案

您可以按以下方式处理它：

  • 添加时将输入值保存到本地存储
  • 如果本地存储中有项目存储，则在页面加载时填充列表
  • 当用户单击清除按钮时，从本地存储中删除所有项目

这可能是这样的：

<div className='container'>
    <h1> New todo list</h1>
    <form>
        <input type='text' id='item' required>
        <ul id="myList"></ul>
        <button id='button'>add</button>
    </form>
    <button id="clear">Clear</button>
</div>
<script>
  var form =  document.querySelector('form')
  var ul = document.querySelector('ul')
  var button =  document.querySelector('#button');
  var input = document.querySelector('#item');
  var clear = document.querySelector('#clear');
  var savedToDos = []
  //this makes list item
  var liMaker = text => {
    var li = document.createElement('li');
    li.textContent = text;
    ul.insertBefore(li, ul.childNodes[0])
  }
  form.addEventListener('submit', function(e) {
    e.preventDefault()
    liMaker(input.value)
    saveToDo(input.value)
    input.value = '';
  });

  clear.addEventListener('click', remove);
  //function remove to remove list item
  function remove(){
    while (ul.firstChild) {
      ul.removeChild(ul.firstChild);
    }
    localStorage.removeItem('savedValues')
  }
  function saveToDo(item) {
    var storedItems = localStorage.getItem('savedValues');
    storedItems = storedItems ? JSON.parse(storedItems) : [];
    storedItems.push(item);
    localStorage.setItem('savedValues', JSON.stringify(storedItems))

  }
  // populate the list on page load from localStorage
  var storedItems = localStorage.getItem('savedValues');
  if (storedItems) {
    JSON.parse(storedItems).forEach(function(item) {
      liMaker(item)
    })
  }
</script>

推荐阅读