Question

我将图片附加到页面中。并且有复选框以查看附加项并隐藏附加项。我将数据保存在JSON数组中。即使我重新加载标签后，我也希望显示这些附加图像。

Answer 1

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

考虑以下示例：

＆＃13;

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

＆＃13;

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

＆＃13;

在上面的例子中，使用JavaScript的DOM操作插入随机数。如果刷新页面，它们将消失，因为它们不存储在文件系统中。

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

考虑下面的示例，它使用LocalStorage：

＆＃13;

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

＆＃13;

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

＆＃13;

在上面的示例中，我使用localStorage将#result div的内容存储到存储中，当我重新加载页面时，我正在阅读内容并替换内容div也是。

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

1 个答案: