页面重新加载后显示附加的图像 [英] Show appended images after page reloads

问题描述

我正在将图像添加到页面中.并且有一个复选框可以查看附加项并隐藏附加项.我将数据保存在JSON数组中.即使重新加载标签后，我也想显示那些附加的图像.

解决方案

通过JavaScript对DOM进行动态更改时，它们不是持久的.如果您想进行一些永久性更改，则可能需要使用LocalStorage或Cookies.

考虑以下示例:

 $(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> 

在上面的示例中，随机数是使用JavaScript使用DOM操纵插入的.如果刷新页面，它们将消失，因为它们没有存储在文件系统中.

如果希望它们保留在浏览器中，则应该有一个读/写介质.其中之一就是LocalStorage.

考虑下面的示例，该示例使用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> 

在上面的示例中，我使用localStorage将#result div的内容存储到存储器中，并且在重新加载页面时，我正在读取内容并替换div的内容. /p>

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 images even after I reload the tab.

解决方案

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.

这篇关于页面重新加载后显示附加的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！