本文档旨在解决在使用 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，存储和加载文本输入值，以及持久化背景颜色：
Sunbed App $(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(); });
注意事项：
确保在克隆元素后立即为其分配唯一的 ID，否则可能会导致数据存储和加载错误。使用 localStorage 存储大量数据可能会影响性能。考虑使用其他存储方案（例如 IndexedDB）来存储大量数据。localStorage 存储的数据是字符串类型。如果需要存储其他类型的数据，需要先将其转换为字符串，然后在加载时将其转换回原始类型。代码中的CSS样式可以根据实际需求进行修改，以达到最佳的视觉效果。在实际应用中，错误处理是至关重要的。例如，检查 localStorage 是否可用，以及处理可能出现的异常情况。
总结
通过本文档，你学习了如何使用 localStorage 持久化克隆元素的文本输入值和背景颜色。关键步骤包括动态生成克隆元素的 ID，监听文本输入框的 keyup 事件，以及在页面加载时从 localStorage 中恢复数据。通过这些技术，你可以构建更具交互性和持久性的 Web 应用程序。
以上就是使用 localStorage 持久化克隆元素的文本输入值和背景色的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1578338.html
微信扫一扫 
支付宝扫一扫 
