cosmo cosmo - 3 months ago 12
HTML Question

How to keep appended data on refresh?

I have a

contenteditable
div
that serves as an editor to allow users to input and save text. Upon clicking a save button, I prompt them to ask what they want to save the text as.

The title is then saved to localstorage and appended to a separate
div
, where they click the title and the text they saved it under will appear in the editor.

The issue now is that whenever I refresh the page, the appended data disappears. Was wondering how I could keep the appended data there on refresh? Also, I need it to still be able to link to its content, not just become a bunch of text in a div.

I've simplified the entire code here:

<!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>


EDIT: How can I also remove the data from the div using say a "remove" button? In the event where the div gets too packed and there are some useless titles that the user wants the remove.

Answer

Try this ... i hope it works

<!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>
Comments