本文档旨在解决在使用 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">
<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>注意事项：
- 确保在克隆元素后立即为其分配唯一的 ID，否则可能会导致数据存储和加载错误。
- 使用 localStorage 存储大量数据可能会影响性能。考虑使用其他存储方案（例如 IndexedDB）来存储大量数据。
- localStorage 存储的数据是字符串类型。如果需要存储其他类型的数据，需要先将其转换为字符串，然后在加载时将其转换回原始类型。
- 代码中的CSS样式可以根据实际需求进行修改，以达到最佳的视觉效果。
- 在实际应用中，错误处理是至关重要的。例如，检查 localStorage 是否可用，以及处理可能出现的异常情况。
总结
通过本文档，你学习了如何使用 localStorage 持久化克隆元素的文本输入值和背景颜色。关键步骤包括动态生成克隆元素的 ID，监听文本输入框的 keyup 事件，以及在页面加载时从 localStorage 中恢复数据。通过这些技术，你可以构建更具交互性和持久性的 Web 应用程序。
