使用 localStorage 持久化克隆元素的文本输入值和背景色-html教程-PHP中文网

使用 localStorage 持久化克隆元素的文本输入值和背景色

霞舞

发布： 2025-09-24 17:14:01

原创

687人浏览过

使用 localstorage 持久化克隆元素的文本输入值和背景色

本文档旨在解决在使用 JavaScript 克隆元素后，如何使用 localStorage 持久化克隆元素的文本输入值和背景色。我们将提供详细的代码示例和步骤，帮助你理解如何为克隆元素动态生成唯一 ID，并利用这些 ID 将数据存储在 localStorage 中，从而在页面刷新后保持数据的完整性。

动态生成克隆元素的 ID

在使用 localStorage 存储数据时，每个元素都需要一个唯一的标识符。对于克隆元素，我们需要在克隆时动态生成这些 ID。以下代码展示了如何使用 jQuery 克隆元素并为其分配唯一的 ID：

for (var x = 1; x < 96; x++) {
    $(".beach_wrapper").append($(".sunbed").first().clone().attr("id", "clon_" + x));

    $("#clon_1,#clon_2").attr('style', 'background:orange;');
    $("#clon_10,#clon_11,#clon_22,#clon_23,#clon_34,#clon_35,#clon_46,#clon_47,#clon_58,#clon_59,#clon_70,#clon_71").attr('style', 'background:honeydew;');
}

登录后复制

这段代码循环克隆 .sunbed 元素，并使用 clon_ 加上循环计数器 x 作为每个克隆元素的 ID。

存储文本输入值到 localStorage

接下来，我们需要监听文本输入框的 keyup 事件，并在每次输入时将文本值存储到 localStorage 中。存储时，使用元素的 ID 作为键：

$("input.sunbed").keyup(function() {
    var text = $(this).val();
    var inpId = $(this).attr('id');
    localStorage.setItem(inpId, text);
});

登录后复制

这段代码选中所有 input.sunbed 元素，监听 keyup 事件。当输入框的值发生变化时，获取输入框的 ID 和值，并使用 localStorage.setItem() 将其存储起来。

从 localStorage 加载文本输入值

当页面加载时，我们需要从 localStorage 中检索之前存储的文本输入值，并将它们设置回对应的输入框。以下代码展示了如何实现这一点：

function getValue() {
    $("input.sunbed").each(function(index) {
        var inpID = $(this).attr('id');
        $(this).val(localStorage.getItem(inpID));
    });
}

document.addEventListener("DOMContentLoaded", function() {
    getValue(); // 在 DOMContentLoaded 事件后立即调用 getValue
});

登录后复制

这段代码首先定义了一个 getValue 函数，该函数遍历所有 input.sunbed 元素，获取每个元素的 ID，然后使用 localStorage.getItem() 从 localStorage 中检索对应的值，并将其设置为输入框的值。最后，在 DOMContentLoaded 事件触发后，立即调用 getValue 函数，确保在页面加载完成后立即恢复文本输入值。

FineVoice语音克隆

免费在线语音克隆，1 分钟克隆你的声音，保留口音和所有细微差别。

查看详情

持久化背景颜色

除了文本输入值，我们还需要持久化克隆元素的背景颜色。这可以通过类似的方式实现，但需要监听不同的事件（例如，双击事件）来改变背景颜色，并将背景颜色值存储到 localStorage 中。

$('.toggle').dblclick(function () {
    let step = $(this).data('actual-step') || 1;
    $(this).addClass('step'+ step);
    $(this).data('actual-step', step + 1 );

    // 获取当前背景颜色
    let backgroundColor = $(this).css('background-color');
    let elementId = $(this).attr('id');

    // 存储背景颜色到 localStorage
    localStorage.setItem(elementId + '_bgColor', backgroundColor);
});

// 在 getValue 函数中恢复背景颜色
function getValue() {
    $("input.sunbed").each(function(index) {
        var inpID = $(this).attr('id');
        $(this).val(localStorage.getItem(inpID));

        // 恢复背景颜色
        let bgColor = localStorage.getItem(inpID + '_bgColor');
        if (bgColor) {
            $(this).css('background-color', bgColor);
        }
    });
}

登录后复制

这段代码监听双击事件，改变元素的 class，从而改变背景颜色。同时，获取当前背景颜色，并将其存储到 localStorage 中，键名为元素的 ID 加上 _bgColor 后缀。在 getValue 函数中，我们不仅恢复文本输入值，还检查 localStorage 中是否存在对应的背景颜色值，如果存在，则将其应用到元素上。

完整代码示例

以下是一个完整的示例，展示了如何动态生成克隆元素的 ID，存储和加载文本输入值，以及持久化背景颜色：

<!DOCTYPE html>
<html>
<head>
  <title>Sunbed App</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <div class="beach_wrapper">
    <div class="sunbed toggle">
      <input type="text" style="height:17px" id="qty" name="qty" size="3" class="sunbed" name="formulario" value="">
    </div>
  </div>

  <script>
    $(document).ready(function() {
      // 克隆元素并分配唯一 ID
      for (var x = 1; x < 96; x++) {
        $(".beach_wrapper").append($(".sunbed").first().clone().attr("id", "clon_" + x));

        $("#clon_1,#clon_2").attr('style', 'background:orange;');
        $("#clon_10,#clon_11,#clon_22,#clon_23,#clon_34,#clon_35,#clon_46,#clon_47,#clon_58,#clon_59,#clon_70,#clon_71").attr('style', 'background:honeydew;');
      }

      // 监听双击事件，改变背景颜色并存储
      $('.toggle').dblclick(function () {
        let step = $(this).data('actual-step') || 1;
        $(this).addClass('step'+ step);
        $(this).data('actual-step', step + 1 );

        // 获取当前背景颜色
        let backgroundColor = $(this).css('background-color');
        let elementId = $(this).attr('id');

        // 存储背景颜色到 localStorage
        localStorage.setItem(elementId + '_bgColor', backgroundColor);
      });

      // 监听文本输入框的 keyup 事件，存储文本值
      $("input.sunbed").keyup(function() {
        var text = $(this).val();
        var inpId = $(this).attr('id');
        localStorage.setItem(inpId, text);
      });

      // 从 localStorage 加载文本输入值和背景颜色
      function getValue() {
        $("input.sunbed").each(function(index) {
          var inpID = $(this).attr('id');
          $(this).val(localStorage.getItem(inpID));

          // 恢复背景颜色
          let bgColor = localStorage.getItem(inpID + '_bgColor');
          if (bgColor) {
            $(this).parent().css('background-color', bgColor); // 恢复父元素的背景颜色
          }
        });
      }

      // 在 DOMContentLoaded 事件后立即调用 getValue
      getValue();
    });
  </script>
</body>
</html>

登录后复制

注意事项：