Show appended images after page reloads

Question

I am appending images into a page. And there is check box to see the appended items and to hide appended items. I save the data in a JSON array. I want to appear those appended

Answer 1

When you are making dynamic changes to the DOM through JavaScript, they are not persistent. If you wanna do some persistent changes you might need to use LocalStorage or Cookies.

Consider the below Example:

$(function () {
  $("input").click(function () {
    $("#result").append(Math.random() * 15 + "<br />");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="Append Random Number" />
<div id="result"></div>

The random numbers are inserted using DOM Manipulation by JavaScript in the above example. If you refresh the page, they disappear, because they are not stored in the file system.

If you want them to persist on the browser, there should be a Read/Write medium. One such thing is LocalStorage.

Consider the below Example, which uses LocalStorage:

$(function () {
  $("#result").html(localStorage["result"] || "");
  $("input").click(function () {
    $("#result").append(Math.random() * 15 + "<br />");
    localStorage["result"] = $("#result").html();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="Append Random Number" />
<div id="result"></div>

In the above example, I am using localStorage to store the contents of the #result div to the storage and when I am reloading the page, I am reading the contents and replacing the contents of the div too.