本文档旨在解决在使用 JavaScript 动态克隆元素（例如，沙滩椅应用程序中的日光浴床）时，如何利用 localStorage 持久化克隆元素的文本输入值和背景颜色。我们将详细介绍如何为每个克隆元素设置唯一的 ID，并使用这些 ID 来存储和检索 localStorage 中的数据，确保刷新页面后数据依然存在。
动态克隆元素并设置唯一 ID
首先，我们需要动态地克隆元素。以下代码展示了如何使用 jQuery 克隆一个 .sunbed 元素，并为其设置唯一的 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;');
}这段代码循环 95 次，每次都将第一个 .sunbed 元素克隆并添加到 .beach_wrapper 中。关键在于 attr("id","clon_"+x)，它为每个克隆元素设置了一个唯一的 ID，例如 clon_1、clon_2 等。 后续对特定id的样式修改也在此处完成。
存储文本输入值到 localStorage
接下来，我们需要监听每个克隆元素的文本输入框的 keyup 事件，并将输入的值存储到 localStorage 中。
$("input.sunbed").keyup(function(){
var text = $(this).val();
var inpId = $(this).attr('id');
localStorage.setItem(inpId, text);
});这段代码为所有 class 为 sunbed 的 input 元素绑定了 keyup 事件。当用户在输入框中输入内容时，$(this).val() 获取输入的值，$(this).attr('id') 获取当前输入框的 ID，然后使用 localStorage.setItem(inpId, text) 将值存储到 localStorage 中，键名为输入框的 ID。
从 localStorage 加载文本输入值
现在，我们需要在页面加载时，从 localStorage 中读取之前存储的文本输入值，并将它们设置到对应的输入框中。
function getValue(){
$( "input.sunbed" ).each(function( index ) {
var inpID = $(this).attr('id');
$(this).val(localStorage.getItem(inpID));
});
}这段代码使用 $("input.sunbed").each() 遍历所有 class 为 sunbed 的 input 元素。对于每个元素，它获取其 ID，然后使用 localStorage.getItem(inpID) 从 localStorage 中读取对应的值，并使用 $(this).val() 将值设置到输入框中。
为了在页面加载时执行 getValue 函数，可以将其添加到 document.addEventListener("DOMContentLoaded", function() { ... }); 中：
document.addEventListener("DOMContentLoaded", function() {
getValue();
});持久化背景颜色
持久化背景颜色的方法与文本输入值类似。首先，需要监听元素的点击事件（或者其他触发背景颜色变化的事件）。然后，获取当前元素的 ID 和背景颜色，并将它们存储到 localStorage 中。
$('.toggle').dblclick(function () { let step = $(this).data('actual-step') || 1;
$(this).addClass('step'+ step);
$(this).data('actual-step', step + 1 );
});这里假设使用双击事件来改变背景颜色， 并使用 step 类来控制颜色的变化。
注意事项：
- ID 的唯一性： 确保每个克隆元素都有唯一的 ID，这是 localStorage 存储和检索数据的关键。
- 数据类型： localStorage 只能存储字符串。如果需要存储其他类型的数据，需要先将其转换为字符串，例如使用 JSON.stringify()。
- localStorage 容量限制： localStorage 的容量有限，通常为 5MB。如果需要存储大量数据，可以考虑使用其他存储方案，例如 IndexedDB。
- 错误处理： 在使用 localStorage 时，应该进行错误处理，例如检查浏览器是否支持 localStorage，以及处理 localStorage 存储失败的情况。
总结：
通过为每个克隆元素设置唯一的 ID，并使用这些 ID 作为键名，可以方便地将克隆元素的文本输入值和背景颜色存储到 localStorage 中。在页面加载时，从 localStorage 中读取这些值，并将它们设置到对应的元素中，从而实现数据的持久化。 这使得用户在刷新页面后，之前输入的数据和选择的颜色仍然保留，提升了用户体验。
