如何保持附加數據刷新？

我有一個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過於封裝並且有一些用戶想要刪除的無用標題。

來源

2016-08-05 cosmo

您是否嘗試過在'。就緒（）'處理顯示localStorage'的'內容是什麼？ – 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

youre welcome buddy ... – Darence30

如何保持附加數據刷新？

回答

相關問題