首页 > 文章 > 前端

输入值和背景色持久化保存方法有哪些

时间：2025-10-23 13:24:31 463浏览收藏

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《输入值和背景色持久化保存方法》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

使用 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 函数，确保在页面加载完成后立即恢复文本输入值。

持久化背景颜色

除了文本输入值，我们还需要持久化克隆元素的背景颜色。这可以通过类似的方式实现，但需要监听不同的事件（例如，双击事件）来改变背景颜色，并将背景颜色值存储到 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">
      &lt;input type=&quot;text&quot; style=&quot;height:17px&quot; id=&quot;qty&quot; name=&quot;qty&quot; size=&quot;3&quot; class=&quot;sunbed&quot; name=&quot;formulario&quot; value=&quot;&quot;&gt;
    </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>

注意事项：

确保在克隆元素后立即为其分配唯一的 ID，否则可能会导致数据存储和加载错误。
使用 localStorage 存储大量数据可能会影响性能。考虑使用其他存储方案（例如 IndexedDB）来存储大量数据。
localStorage 存储的数据是字符串类型。如果需要存储其他类型的数据，需要先将其转换为字符串，然后在加载时将其转换回原始类型。
代码中的CSS样式可以根据实际需求进行修改，以达到最佳的视觉效果。
在实际应用中，错误处理是至关重要的。例如，检查 localStorage 是否可用，以及处理可能出现的异常情况。

总结

通过本文档，你学习了如何使用 localStorage 持久化克隆元素的文本输入值和背景颜色。关键步骤包括动态生成克隆元素的 ID，监听文本输入框的 keyup 事件，以及在页面加载时从 localStorage 中恢复数据。通过这些技术，你可以构建更具交互性和持久性的 Web 应用程序。

理论要掌握，实操不能落！以上关于《输入值和背景色持久化保存方法有哪些》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！