本文旨在解决在使用 JavaScript 动态创建克隆元素时，如何利用 localStorage 持久化这些克隆元素的输入框值和样式状态。我们将提供详细的代码示例和步骤，帮助开发者实现数据的本地存储和恢复，从而提升用户体验。
问题背景
在 Web 应用开发中，经常需要动态生成元素，例如克隆现有的 HTML 结构。如果这些动态元素包含输入框或其他需要保存状态的组件，刷新页面后，这些状态会丢失。localStorage 提供了一种在客户端存储数据的机制，可以用来解决这个问题。
解决方案
以下是一个使用 localStorage 持久化动态克隆元素输入框值的示例。该示例基于 jQuery，并提供了完整的 HTML、CSS 和 JavaScript 代码。
HTML 结构:
CSS 样式:
.beach_wrapper { width: 1170px; max-width: 100%; display: grid; grid-template-columns: 100px 100px 120px 100px 100px 100px 100px 100px 100px 100px 100px 100px ; grid-template-rows: 90px 90px 90px 90px 90px 110px 100px 90px; gap: 0px 0px; transform:scale(70%); margin-left: auto; margin-right: auto; padding-right: 10px; padding-left: 10px; }body { display: flex; align-items: center ; height: 100vh; background:honeydew;}.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; } .sunbed.step1 { background:LightSeaGreen; /*ocupado*/ }.sunbed.step2 { background: red; /*pagado*/ }.sunbed.step3 { background: linear-gradient(to left, LightSeaGreen 50%, DarkCyan 50%); /*ocupado con 3 hamacas cada lado*/ }.sunbed.step4 { background:linear-gradient(to left, LightSeaGreen 50%, green 50%); /*ocupado 1 persona sola*/ }.sunbed.step5{ background:orange; /*hamaca off*/}.sunbed.step6{ background:green;}.sunbed.step7{ background:LightSeaGreen;}.sunbed.step8{ background:red;}.sunbed.step9{ background:linear-gradient(to left, LightSeaGreen 50%, DarkCyan 50%); /*ocupado con 3 hamacas cada lado*/}.sunbed.step10{ background:linear-gradient(to left, LightSeaGreen 50%, green 50%); /*ocupado 1 persona sola*/ }.sunbed.step11{ background:green;}.form input{ background-color: #FFEFD5; border: none; border-bottom: 1px solid green; text-align:center; zoom: 100%; touch-action: none; }@media only screen and (min-width: 384px) and (max-width: 767px) { /* Your Styles... */ }#clon_10,#clon_11,#clon_22,#clon_23,#clon_34,#clon_35,#clon_46,#clon_47,#clon_58,#clon_59,#clon_70,#clon_71{ border: 0px solid; }#clon_72,#clon_73,#clon_74,#clon_75,#clon_76,#clon_77,#clon_78,#clon_79,#clon_80,#clon_81,#clon_82,#clon_83,#clon_84,#clon_85,#clon_86,#clon_87,#clon_88,#clon_89,#clon_90,#clon_91,#clon_92,#clon_93,#clon_94,#clon_95{ width: 75px; height: 45px; border-radius: 30px;}.h1{ margin-top:-50px;}
JavaScript 代码:
let variable1; 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 ); }); document.addEventListener("DOMContentLoaded", function() { document.getElementById("qty").onload = getValue(); }); var localStorageArr = {}; $("input.sunbed").keyup(function(){ var text = $(this).val(); var inpId = $(this).attr('id'); localStorage.setItem(inpId, text); });//local storage to keep values after refreshfunction getValue(){ $( "input.sunbed" ).each(function( index ) { var inpID = $(this).attr('id'); $(this).val(localStorage.getItem(inpID)); });}
代码解释：
克隆元素： 使用 jQuery 的 clone() 方法创建元素的副本，并使用 attr(“id”, “clon_” + x) 为每个克隆元素赋予唯一的 ID。事件监听： 使用 keyup 事件监听输入框值的变化。当输入框的值改变时，获取输入框的 ID 和值，并使用 localStorage.setItem(inpId, text) 将其存储到 localStorage 中。数据恢复： 在页面加载完成后，使用 getValue() 函数遍历所有具有 sunbed 类的输入框，并使用 localStorage.getItem(inpID) 从 localStorage 中获取对应的值，然后将其设置到输入框中。
注意事项：
确保每个克隆元素都有唯一的 ID，以便在 localStorage 中存储和检索数据。localStorage 存储的数据是字符串类型。如果需要存储其他类型的数据，需要进行序列化和反序列化。localStorage 的容量有限，不适合存储大量数据。可以使用 JSON.stringify() 和 JSON.parse() 方法来序列化和反序列化复杂的数据结构。
总结：
通过使用 localStorage，可以方便地持久化动态克隆元素的输入框值和样式状态，从而提升用户体验。本教程提供了一个完整的示例，展示了如何实现这一功能。开发者可以根据自己的需求进行修改和扩展。
以上就是使用 localStorage 持久化动态克隆元素的输入值和样式的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1578350.html
微信扫一扫 
支付宝扫一扫 
