本文档旨在指导开发者如何在使用 JavaScript 动态创建克隆元素后，利用 localStorage 在页面刷新后保持这些克隆元素的输入框文本值和背景颜色等状态。我们将通过代码示例，详细讲解如何为每个克隆元素设置独立的 localStorage 键，并实现数据的读取和存储。
问题背景
在动态生成大量相似元素（例如，通过克隆现有元素）的应用场景中，如果每个元素都有自己的状态（例如，输入框中的文本、背景颜色等），并且需要在页面刷新后保持这些状态，localStorage 提供了一种简单有效的解决方案。关键在于为每个克隆元素生成唯一的标识符，并使用该标识符作为 localStorage 的键。
解决方案
以下是一个示例，展示了如何使用 localStorage 持久化克隆元素的输入框文本值和背景颜色。
HTML 结构
JavaScript 代码
$(document).ready(function() {
// 克隆元素
for (var x = 1; x < 96; x++) {
$(".beach_wrapper").append($(".sunbedtoggle").first().clone().find('input').attr("id", "clon_" + x).end());
}
// 初始样式设置 (示例)
$("#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;');
// 双击切换背景颜色 (示例)
$('.sunbedtoggle').dblclick(function() {
let step = $(this).data('actual-step') || 1;
$(this).addClass('step' + step);
$(this).data('actual-step', step + 1);
});
// 存储输入框值
$("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));
});
}
// 页面加载时加载值
getValue();
});CSS 样式 (部分)
.beach_wrapper {
width: 1170px;
max-width: 100%;
display: grid;
grid-template-columns: repeat(12, 100px); /* 更简洁的写法 */
grid-template-rows: repeat(8, 90px);
gap: 0px 0px;
transform: scale(70%);
margin-left: auto;
margin-right: auto;
padding-right: 10px;
padding-left: 10px;
}
.sunbed {
width: 70px;
height: 40px;
border: 2px solid;
color: orange;
border-color: black;
background: green;
text-align: center;
display: inline-block;
font-family: sans-serif;
margin-left: 12px;
margin-top: 15px;
}代码解释：
- 克隆元素： 使用 jQuery 的 clone() 方法复制 .sunbedtoggle 元素，并循环添加。
- 生成唯一 ID： 为每个克隆的 input 元素设置唯一的 id，例如 clon_1、clon_2 等。这非常重要，因为 id 将作为 localStorage 的键。
- 存储输入框值： 监听 input.sunbed 的 keyup 事件。当输入框的值发生变化时，获取当前输入框的 id 和值，并使用 localStorage.setItem() 将其保存。
- 加载输入框值： getValue() 函数遍历所有的 input.sunbed 元素，获取每个元素的 id，并使用 localStorage.getItem() 从 localStorage 中读取对应的值，然后设置到输入框中。
- 页面加载时加载值： 在 $(document).ready() 中调用 getValue() 函数，确保在页面加载完成后，从 localStorage 中恢复输入框的值。
注意事项：
- 唯一 ID： 确保每个克隆元素都有唯一的 ID，否则 localStorage 会覆盖之前的值。
- 数据类型： localStorage 只能存储字符串。如果需要存储其他类型的数据，需要先将其转换为字符串，例如使用 JSON.stringify()。读取时，再使用 JSON.parse() 将字符串转换回原始数据类型。
- 性能： 频繁读写 localStorage 可能会影响性能。在大量数据需要持久化时，可以考虑使用 IndexedDB 等更高级的存储方案。
- 安全性： localStorage 存储的数据是明文的，不适合存储敏感信息。
总结：
通过为每个克隆元素生成唯一的 ID，并使用 localStorage 存储和加载其状态，可以轻松实现在页面刷新后保持动态生成元素状态的功能。 请务必注意数据类型转换、性能和安全性等问题。
