使用 Jquery 在文本框中进行本地存储

Question

我是 jquery 和 localstorage 的新手。我想使用本地存储到所有使用 jquery 的文本框。

<input id="in-1" type="text" />
<br />
<input id="in-2" type="text" />
<br />
<input id="in-3" type="text" />
<br />
<input id="in-4" type="text" />
<br />

我正在尝试遵循这个脚本：

(function ($) {
if (typeof (window.localStorage) != "undefined") {
    $.each($("input[type=text]"), function () {
        localStorage.getItem($(this).attr("id")));
    });
    $("input[type=text]").on("change", function () {
        localStorage.setItem($(this).attr("id"), $(this).val());

    });
}
})(jQuery);

但我无法完成这项工作。

Answer 1

试试这个：

jQuery(function ($) {
    if (typeof (window.localStorage) != "undefined") {

        // will get value of specific id from the browser localStorage and set to the input 
        $("input[type=text]").val(function () {
            return localStorage.getItem(this.id);
        });

        // will set values in browser localStorage for further reference
        $("input[type=text]").on("change", function () {
            localStorage.setItem(this.id, $(this).val());
        });
    }
});

这是一个有效的Demo。

详情：

在现代浏览器中使用本地存储非常简单。您所要做的就是在 JavaScript 中修改localStorage object。你可以直接这样做，或者（这可能更干净）使用 setItem() 和 getItem() 方法：

localStorage.setItem('favoriteflavor','vanilla');

如果你读出了最喜欢的风味键，你会得到“香草”：

var taste = localStorage.getItem('favoriteflavor');
// -> "vanilla"

要删除该项目，您可以使用 - 您猜到了吗？ — removeItem() 方法：

localStorage.removeItem('favoriteflavor');
var taste = localStorage.getItem('favoriteflavor');
// -> null

就是这样！如果您希望仅在浏览器窗口关闭之前保留数据，您也可以使用 sessionStorage 而不是 localStorage。

完整的reference here。它应该能让你更多地了解localStorage。

Answer 2

你需要重新设置值

jQuery(function ($) {
    if (typeof (window.localStorage) != "undefined") {
        //set the value to the text fields
        $("input[type=text]").val(function () {
            return localStorage.getItem(this.id);
        });
        $("input[type=text]").on("change", function () {
            localStorage.setItem(this.id, $(this).val());
        });
    }
});

演示：Fiddle