localstorageのTo-doアプリ

私は現在、単純なバニラのJavaScript To-doアプリケーションを書いています。すべてはうまく見えますが、新しいlocalStorageにデータを保存すると、私はできません。 localStorageを使用したことはありません。私は多くの記事を読んだことがあります。シンプルなものを試してみますが、アプリケーションを正しく動作させることはできません。入力したデータをリフレッシュすると保存されますが、消えません。現在は...アプリケーションへのリンクです。localstorageのTo-doアプリ

****私はバニラ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と私はとても興奮していますので、完全に動作させたいのです。

再開：

それは新しい生成

<div class="todo></div>コンテナを保存するために、のlocalStorageかのsessionStorageで可能ですか？

出典

2017-01-23 Nasco.Chachev

は悪いアイデアのように聞こえるのです。これはコードの*ロット*、おそらくスタックオーバーフローの質問にはあまりにも多すぎます。あなたは何を抱えているのかをより詳細に明らかにし、問題に関連するコードを表示できますか？ –

私は似たようなプロジェクトに取り組んでいます、ここでのサンプルコードは、ローカルストレージにHTMLを保存することです

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

は、HTMLをロードするために、この

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

を使用して、それを取得することができます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>);

をあなたを保存します私はこのようなJSON.stringify（）とJSON.parse（）を使用してお勧めしたいストレージ内の文字列のようにjavascriptのオブジェクト：

はここ

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(); 
});

おそらく、data属性を使用してDOMにUUIDを保存し、あなたのエントリのUUIDシステムのいくつかの種類を実装する必要があります、そうすることができますe簡単に削除/削除してください。

基本的に、私が示していることは、DOMを保存する理由がないということです。重要なもの（内部のテキスト）をJSON.stringifyして保存してください。その後、再ロード時にローカルストレージから再調整します。ここで

は* HTML要素*ではなく、その背後にあるデータを格納する私のcodepen

出典

2017-01-23 10:42:25 Glitcher

答えて

関連する問題