页面重新加载后显示附加图像

Question

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

Answer 1

当您通过 JavaScript 对 DOM 进行动态更改时，它们不是持久的。如果您想做一些持久的更改，您可能需要使用LocalStorage 或 Cookie。

考虑下面的例子：

$(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 的内容。