本地存储,用于保存页面上的每个输入和复选框值

Local storage saving every input and checkbox value on a page

本文关键字:输入 复选框 存储 用于 保存      更新时间:2023-09-26

有没有一种方法可以在不需要太多代码的情况下保存每个输入字段和复选框?我有这个,保存单独的输入字段效果很好,每个字段上都有一个class="stored"

$(document).ready(function () {
    function init() {
        if (localStorage["fname"]) {
            $('#fname').val(localStorage["fname"]);
        }
    }
    init();
});
$('.stored').change(function () {
    localStorage[$(this).attr('name')] = $(this).val();
});
<div class="form-group required">
    <label class="label_fn control-label" for="fname">First name (required):</label>
    <input id="fname" name="fname" type="text" placeholder="" class="input_fn form-control stored">
    </div>

但是,有没有一种方法,比如说,在容器div上设置一个"something-container"类,并使用此脚本作为基础,将所有输入字段保存到存储中,并让它们保持填充在字段中,直到用户清除会话?

是的,只需将change事件中的选择器从".stored"更改为".something-container input"即可。在Init方法中,您将希望执行以下操作:

$(".something-container input").each(function () {
    $(this).val(localStorage[$(this).attr("name")])
}

附带说明的是,.change绑定也应该在$(document).ready方法中完成。