本文旨在解决在使用 JavaScript 动态创建克隆元素时，如何利用 localStorage 持久化这些克隆元素的输入框值和样式状态。我们将提供详细的代码示例和步骤，帮助开发者实现数据的本地存储和恢复，从而提升用户体验。
问题背景
在 Web 应用开发中，经常需要动态生成元素，例如克隆现有的 HTML 结构。如果这些动态元素包含输入框或其他需要保存状态的组件，刷新页面后，这些状态会丢失。localStorage 提供了一种在客户端存储数据的机制，可以用来解决这个问题。
解决方案
以下是一个使用 localStorage 持久化动态克隆元素输入框值的示例。该示例基于 jQuery，并提供了完整的 HTML、CSS 和 JavaScript 代码。
HTML 结构:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div class="beach_wrapper"> <div class="sunbedtoggle"> <input type="text" style="height:17px" id="qty" name="qty" size="3" class="sunbed" name="formulario" value=""> </div> </div>
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 refresh function 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，可以方便地持久化动态克隆元素的输入框值和样式状态，从而提升用户体验。本教程提供了一个完整的示例，展示了如何实现这一功能。开发者可以根据自己的需求进行修改和扩展。
相关标签：
css javascript java jquery html js json ajax cad app mac cdn JavaScript json jquery css html 字符串 数据结构 字符串类型 事件 应用开发