javascript - jQuery 设置和获取下拉列表和输入的本地存储数据

Question

我正在尝试使一个简单的表单页面具有一些本地存储功能，以便在页面关闭/重新加载后恢复设置/输入。

我已经尝试开始，但我仍在学习，所以存在错误，我无法让它工作。

• 如果名称输入字段发生更改，则应使用新名称更新本地存储。
• 如果对任何下拉列表(选择器？选项？)字段进行更改，则应使用新值更新本地存储。
• 在页面加载时，它应该自动恢复所有值。
• “清除”按钮应该仅将下拉列表(选择器？选项？)字段重置为空白，而不应该不重置名称字段。

示例:https://jsfiddle.net/5gam3b6f/

$(document).ready(function () {
    $.each($("select"), function (index, value)) {
        localStorage.getItem($(this).attr(“id”));
    };
});

$("select").on("change", function () {
    localStorage.setItem($(this).attr(“id”), $(this));
});

我还没有成功启动名称输入字段或清除功能，因为我什至无法让第一个功能正常工作。

我宁愿不使用外部库，因为这会变得很复杂，不需要其他任何东西。

Answer 1

以下内容适合您:

Here is a working jsFiddle

jQuery

$('.useLocalSelect').change(function () {
    var key = $(this).attr('id');
    var value = $(this).val();
    localStorage.setItem(key, value)
});

// use a timer for text fields and the like so that localsotrage is set 2 seconds after the user stops typing instead of after each keystroke
var t = '';
$('.useLocalInput').keyup(function () {
    clearTimeout(t);
    var key = $(this).attr('id');
    var value = $(this).val();
    t = setTimeout(function () {
        localStorage.setItem(key, value)
    }, 2000);
});

$('.useLocal').each(function () {
    var key = $(this).attr('id');
    if (localStorage.getItem(key)) {
        $(this).val(localStorage.getItem(key));
    }
});

$('.clearLocalSelect').click(function () {
    $('.useLocalSelect').each(function () {
        $(this).val('');
        var key = $(this).attr('id');
        localStorage.removeItem(key);
    });
});

html

<label style="color: #01ACEE; font: bold 14px Tahoma;">Input &nbsp;&nbsp;&nbsp;
    <input class="useLocal useLocalInput" id="testInput" size="40" type="text" name="website" value="" required/>
</label>
<br/>
<br/>
<label style="color: #01ACEE; font: bold 14px Tahoma;">Select</label>
<select class="useLocal useLocalSelect" id="testSelect" name="start_date">
    <option value="">Select one...</option>
    <option value="January">January</option>
    <option value="February">February</option>
    <option value="March">March</option>
    <option value="April">April</option>
    <option value="May">May</option>
    <option value="June">June</option>
    <option value="July">July</option>
    <option value="August">August</option>
    <option value="September">September</option>
    <option value="October">October</option>
    <option value="November">Noember</option>
    <option value="December">December</option>
</select>
<br/>
<br/>
    <input type="button" class="clearLocalSelect" value="Clear Selects"/>