使用 localStorage 持久化动态克隆元素的输入值和样式-html教程-PHP中文网

使用 localStorage 持久化动态克隆元素的输入值和样式

霞舞

发布： 2025-09-24 16:52:14

原创

343人浏览过

使用 localstorage 持久化动态克隆元素的输入值和样式

本文旨在解决在使用 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 代码:

FineVoice语音克隆

免费在线语音克隆，1 分钟克隆你的声音，保留口音和所有细微差别。

查看详情

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 中获取对应的值，然后将其设置到输入框中。

注意事项：