如何保持附加数据刷新？

我有一个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

如何保持附加数据刷新？

回答

相关问题