用localStorage做的應用程序

我現在正在編寫一個簡單的香草JavaScript待辦應用程序。一切看起來都很好，但是當涉及到將數據保存在新的localStorage中時，我無法做到，從未使用過localStorage，我讀過很多文章，當我嘗試使用簡單的東西時，但我無法讓我的應用程序正常工作。我想保存輸入的數據等刷新，它不會消失，現在的方式...這是鏈接到應用程序用localStorage做的應用程序

****我想要與VANILLA JAVASCRIPT，而不是JQUERY ****

My to-do app here!

所以基本上，如果用戶進行多次待辦事項，當刷新，我想一切都留下來，像在圖像的打擊。

HTML：

<body> 
    <div class="holder"> 
     <div> 
      <input type="text" /> 
     </div> 

     <button id="add">Add</button> 

     <div class="results"></div> 
    </div> 

</body>

JS：

document.addEventListener('DOMContentLoaded',function(){ 

     let holder = document.querySelector('.holder'), 
      addBtn = document.querySelector('#add'), 
      removeBtn = document.querySelector('#remove'), 
      resultBox = document.querySelector('.results'); 

     let input = document.getElementsByTagName('input')[0]; 


     function setAttributes(element,attrs){ 
      for(let i in attrs){ 
       element.setAttribute(i,attrs[i]); 
      } 
     } 

     setAttributes(input,{ 
      'placeholder' : 'Enter To-Do', 
      'name' : 'todo' 
     }); 

     function addtoBtn(){ 

      addBtn.addEventListener('click',function(event){ 

      if(input.value !== ''){ 
       let openingDiv = '<div class="todo"><span>'; 
       let closingDiv = '</span><button class="edit">Edit</button><button class="save">Save</button><button class="removeBtn">Remove</button></div>'; 

       resultBox.innerHTML += openingDiv + input.value + closingDiv; 
       input.value = ''; 
       event.preventDefault(); 


      } else{ 
       alert('Enter To-do!'); 
      } 

      let innerBtn = document.querySelectorAll('.removeBtn'); 
      let editBtn = document.querySelectorAll('.edit'); 
      let saveBtn = document.querySelectorAll('.save'); 

      for(let collection = 0 ; collection < saveBtn.length ; collection++){ 
       saveBtn[collection].style.display = "none"; 
      } 

      function removeToDo(){ 

       this.parentNode.style.display = 'none'; 
      } 

      for(let k = 0 ; k < innerBtn.length ; k++){ 
       innerBtn[k].addEventListener('click',removeToDo); 
      } 

      function startContentEdit(){ 
       this.previousSibling.contentEditable = true; 
       this.previousSibling.style.padding = "10px"; 
       this.previousSibling.style.boxShadow = "0 0 15px #fff"; 
       this.previousSibling.style.borderRadius = "10px"; 
       this.previousSibling.style.transition = "all .4s"; 

       this.style.display = "none"; 

       for(let el = 0 ; el < saveBtn.length ; el++){ 
        this.nextSibling.style.display = 'inline-block'; 
       } 
      } 

      for(let j = 0 ; j < editBtn.length ; j++){ 
       editBtn[j].addEventListener('click',startContentEdit); 
      } 

      function saveContentEdit(){ 
       this.style.display = 'none'; 

       for(let j = 0 ; j < editBtn.length ; j++){ 

        this.previousSibling.style.display = "inline-block"; 

        this.parentNode.firstElementChild.style.display = "block"; 
        this.parentNode.firstElementChild.contentEditable = false; 
        this.parentNode.firstElementChild.style.padding = "0px"; 
        this.parentNode.firstElementChild.style.boxShadow = "0 0 0"; 
       } 
      } 

      for(let x = 0 ; x < saveBtn.length ; x++){ 
       saveBtn[x].addEventListener('click',saveContentEdit); 
      } 

      }); 
     } 

     addtoBtn(); 
});

正如我所說的，我看到很多文章，但我找不到任何答案，我的解決方案。對不起，但這是我的第一個JavaScript應用程序，幾乎所有的工作：D和我有點興奮，所以我想使它充分工作。

簡歷：

是否有可能用的localStorage或sessionStorage的，保存新生成的

<div class="todo></div>容器？

來源

2017-01-23 Nasco.Chachev

存儲* HTML元素*，而不是它背後的數據聽起來像一個壞主意。這是很多代碼，可以證明堆棧溢出問題太多了。你能否更詳細地澄清你所困擾的事情，並顯示與問題相關的代碼？ –

我在一個類似的項目工作，這裏是一個示例代碼使用此

var myStorage = JSON.parse(localStorage.getItem('myStorage'));

爲HTML保存到本地存儲

var myToDos= document.getElementById('myToDos'); 
var htmlHolder = { "htmlToDo": myToDos.outerHTML }; 
localStorage.setItem('myStorage', JSON.stringify(htmlHolder));

你可以檢索爲了加載HTML元素，您需要使用DOMParser，然後將其附加到您的工作區域。

var parsedHTML = new DOMParser().parseFromString(myStorage.htmlToDo, "text/html");

請大家注意，「text/html的」將返回一個完整的HTML源代碼與標題和正文，通過檢查控制檯上的輸出，並使用訪問和.lastElementChild等相關的兒童得到你需要的元素。由於你的容器可能會容納很多孩子，你所要做的就是循環訪問.children節點列表。

我告訴你，這是完全可能的，因爲我已經在一個相當絕望的情況下自己做了。但請注意，localStorage非常小，根據瀏覽器配額不同，大小隻有4-10mb左右。

來源

2017-01-23 10:24:41 Merigold

使用本地存儲其實很簡單：讓自己的參考：

store = window.localStorage;

，那麼你可以在其中存儲的東西就像你使用的鍵 - 值對任何其他容器：

store[<key>] = <value>; //or alternatively: 
store.setItem(<key>, <value>);

，並再次檢索值：

val = store[<key>]; //or alternatively: 
val = store.getItem(<key>);

，以節省您的JavaScript對象作爲存儲字符串我建議透過JSON.stringify（）和JSON.parse（）這樣的：

store.setItem("todos", JSON.stringify(todos)); 
todos = JSON.parse(store.getItem("todos"))

這裏的「待辦事項」可以爲幾乎任何沒有因爲循環引用這將混淆JSON解析器;>

來源

2017-01-23 10:31:19 garglblarg

使用你原來的代碼：

document.addEventListener('DOMContentLoaded',function(){ 

    let history = JSON.parse(localStorage.getItem("todoHistory")) || []; 

     addBtn = document.querySelector('#add'), 
     removeBtn = document.querySelector('#remove'), 
    resultBox = document.querySelector('.results'); 

     let input = document.getElementsByTagName('input')[0]; 


     function setAttributes(element,attrs){ 
      for(let i in attrs){ 
       element.setAttribute(i,attrs[i]); 
      } 
     } 

     setAttributes(input,{ 
      'placeholder' : 'Enter To-Do', 
      'name' : 'todo' 
     }); 

    function applyNewEntry(entry){ 
     if(input.value !== ''){ 
      let openingDiv = '<div class="todo"><span>'; 
      let closingDiv = '</span><button class="edit">Edit</button><button class="save">Save</button><button class="removeBtn">Remove</button></div>'; 

      resultBox.innerHTML += openingDiv + entry + closingDiv; 
      event.preventDefault(); 
      return true; 
     } 
     return false; 
    } 

    function addtoBtn(){ 

     addBtn.addEventListener('click',function(event){ 

     if(applyNewEntry(input.value)){ 
      history.push(input.value); 
      input.value = ''; 
      localStorage.setItem("todoHistory", history); 
     } 
     else{ 
      alert('Enter To-do!'); 
     } 

     let innerBtn = document.querySelectorAll('.removeBtn'); 
     let editBtn = document.querySelectorAll('.edit'); 
     let saveBtn = document.querySelectorAll('.save'); 

     for(let collection = 0 ; collection < saveBtn.length ; collection++){ 
      saveBtn[collection].style.display = "none"; 
     } 

     function removeToDo(){ 

      this.parentNode.style.display = 'none'; 
     } 

     for(let k = 0 ; k < innerBtn.length ; k++){ 
      innerBtn[k].addEventListener('click',removeToDo); 
     } 

     function startContentEdit(){ 
      this.previousSibling.contentEditable = true; 
      this.previousSibling.style.padding = "10px"; 
      this.previousSibling.style.boxShadow = "0 0 15px #fff"; 
      this.previousSibling.style.borderRadius = "10px"; 
      this.previousSibling.style.transition = "all .4s"; 

      this.style.display = "none"; 

      for(let el = 0 ; el < saveBtn.length ; el++){ 
       this.nextSibling.style.display = 'inline-block'; 
      } 
     } 

     for(let j = 0 ; j < editBtn.length ; j++){ 
      editBtn[j].addEventListener('click',startContentEdit); 
     } 

     function saveContentEdit(){ 
      this.style.display = 'none'; 

      for(let j = 0 ; j < editBtn.length ; j++){ 

       this.previousSibling.style.display = "inline-block"; 

       this.parentNode.firstElementChild.style.display = "block"; 
       this.parentNode.firstElementChild.contentEditable = false; 
       this.parentNode.firstElementChild.style.padding = "0px"; 
       this.parentNode.firstElementChild.style.boxShadow = "0 0 0"; 
      } 
     } 

     for(let x = 0 ; x < saveBtn.length ; x++){ 
      saveBtn[x].addEventListener('click',saveContentEdit); 
     } 

     }); 
    } 

    addtoBtn(); 
});

您需要實現某種形式的UUID系統爲您的項目，很可能是通過數據屬性保存UUID到DOM ，那樣你可以e dit /相當容易地刪除它們。

基本上，我所說的是沒有理由保存DOM。只是JSON.stringify重要的東西（內部文本），並保存。然後在重新加載時從本地存儲重新編譯它。

這裏是我的codepen

來源

2017-01-23 10:42:25 Glitcher

用localStorage做的應用程序

回答

相關問題