使用 localStorage 持久化动态克隆元素的文本输入值和背景颜色

本文档旨在解决在使用 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() 将值设置到输入框中。

FineVoice语音克隆

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

61

查看详情

为了在页面加载时执行 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 持久化动态克隆元素的文本输入值和背景颜色的详细内容，更多请关注php中文网其它相关文章！