追加データを最新の状態に保つにはどうすればいいですか？

私はcontenteditabledivを持っています。これは、ユーザーがテキストを入力して保存できるエディタとして機能します。保存ボタンをクリックすると、テキストを保存する内容を尋ねるメッセージが表示されます。追加データを最新の状態に保つにはどうすればいいですか？

タイトルはlocalstorageに保存され、別のdivに追加されます。ここでタイトルがクリックされ、そこに保存されたテキストがエディタに表示されます。

問題は、ページを更新するたびに、追加されたデータが消えることです。そこに追加されたデータを更新する方法をどう思っていましたか？また、divのテキストの束になるのではなく、そのコンテンツにリンクできるようにする必要があります。

は、私がここにコード全体を簡素化しました：

<!doctype html> 
<html> 
<head> 
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"> 
</script> 
</head> 
<body> 
<div style="width:10em; height:10em; border-style:solid; border-color:black;" id="editor1" contenteditable="true"></div> 
<button id="savebtn">Save Changes</button> 
<div style="width:10em; height:5em; border-style:solid; border-color:red;" id="Contentable"></div> 
<script> 
    var editElem = document.getElementById("editor1"); 
    $(document).ready(function() { 
     $("#savebtn").click(function() { 
     var title = prompt("What would you like your title to be?"); 
     localStorage.setItem(title, editElem.innerHTML); 
     titles = localStorage.getItem("titles"); 

     if (titles == null) { 
      titles = []; 
     } else { 
      titles = JSON.parse(titles); 
     } 
     titles.push(title); 
     localStorage.setItem("titles", JSON.stringify(titles)); 
     var htmlData = "<a onclick=showData('" + title + "')>" + title + "</a><br>"; 
     $("#Contentable").append(htmlData); 
     var userVersion = editElem.innerHTML; 
     localStorage.setItem("userEdits", userVersion); 
     editElem.innerHTML = ""; 
     }); 
    }); 

    function showData(txt) { 
     editElem.innerHTML = localStorage.getItem(txt); 
    } 
</script> 
</body> 
</html>

編集：どのように私も言うボタンを「削除」を使用してdiv要素からデータを削除することができますか？ divがあまりにも詰まって、ユーザーが削除を望むいくつかの無駄なタイトルがある場合。

出典

2016-08-05 cosmo

の作品を願って...これを試してみてください、あなたは 'localStorage'で' .ready（） 'ハンドラの内容を表示しようとしたことがありますか？ – guest271314

私はそれが

<!doctype html> 
<html> 
<head> 
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"> 
</script> 
<style type="text/css"> 
    .selected{ 
    background-color: blue; 
    color:white; 
    } 
</style> 
</head> 
<body> 
<div style="width:10em; height:10em; border-style:solid; border-color:black;" id="editor1" contenteditable="true"></div> 
<button id="savebtn">Save Changes</button> 
<button id="remove">Remove Data</button> 
<div style="width:10em; height:5em; border-style:solid; border-color:red;" id="Contentable"></div> 
<script> 
    var editElem = document.getElementById("editor1"); 
    $(document).ready(function() { 
     $("#savebtn").click(function() { 
     var title = prompt("What would you like your title to be?"); 
     localStorage.setItem(title, editElem.innerHTML); 
     titles = localStorage.getItem("titles"); 

     if (titles == null) { 
      titles = []; 
     } else { 
      titles = JSON.parse(titles); 
     } 
     titles.push(title); 
     localStorage.setItem("titles", JSON.stringify(titles)); 
     var htmlData = "<a onclick=showData('" + title + "')>" + title + "</a><br>"; 
     $("#Contentable").append(htmlData); 
     var userVersion = editElem.innerHTML; 
     localStorage.setItem("userEdits", userVersion); 
     editElem.innerHTML = ""; 
     }); 
    }); 

    function showData(txt) { 
     editElem.innerHTML = localStorage.getItem(txt); 
    } 

    function loadData() 
    { 

     var htmlData=localStorage.getItem("titles"); 
     htmlData=htmlData.replace(/\[|\]/g, ""); 

     htmlData=htmlData.replace(/["']/g, "") 
     htmlData=htmlData.split(","); 

     var arlength=htmlData.length; 
     console.log(arlength) 
     for(num=0;num<arlength;num++) 
     { 

     $("#Contentable").append("<a onclick=showData('" + htmlData[num] + "')>" + htmlData[num] + "</a><br>"); 

     } 

    } 
    loadData(); 
    var selected; 
    $("#Contentable a").click(function(){ 
     selected=$("#Contentable a").index(this); 
     $("#Contentable a").removeClass("selected") 
     $(this).addClass("selected"); 
    }) 

    $("#remove").click(function(){ 
     $("#Contentable a:eq("+selected+")").remove(); 
     // Some Delete codes to localStorage here================================= 
    }) 


</script> 
</body> 
</html>

出典

2016-08-05 02:15:23 Darence30

「ここのコード」に何を追加しますか？そして私はこれをどこに加えるべきですか？ – cosmo

まさに私が必要なもの！ありがとうございました。 – cosmo

あなたは仲間を歓迎します... – Darence30

追加データを最新の状態に保つにはどうすればいいですか？

答えて

関連する問題