本文档旨在解决在使用 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 中读取这些值，并将它们设置到对应的元素中，从而实现数据的持久化。 这使得用户在刷新页面后，之前输入的数据和选择的颜色仍然保留，提升了用户体验。
以上就是使用 localStorage 持久化动态克隆元素的文本输入值和背景颜色的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1578368.html
微信扫一扫 
支付宝扫一扫 
