本文旨在解决在使用 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 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，可以方便地持久化动态克隆元素的输入框值和样式状态，从而提升用户体验。本教程提供了一个完整的示例，展示了如何实现这一功能。开发者可以根据自己的需求进行修改和扩展。
