本地存储Jquery

我正在使用jQuery处理本地存储。我有一个输入字段，你可以在其中键入一些文本，按enter键，刷新，文本仍然存在。这样很好

但是我想把它和我写的一个不同的函数结合起来。在该功能中，用户可以单击灰色按钮，然后将其激活，使其变为红色，并将1添加到容器中。它就像一个按钮

那么，如何保存“单击计数器信息”按钮变为红色，并使用本地存储更新值

我做了这个JSFIDLE：

这是你的

---

不能以这种方式写入$input[type=text].valfunction{}。val上没有事件。

您可以存储来自心脏的计数

更新你的小提琴

检索并保存总的点击次数 var result=$.output.text； setItem'click'，结果

如果存在带有键的本地存储，请单击在div中显示它 如果localStorage.getItem“单击”！=空的{ $'.output'.textlocalStorage.getItem'click'； }

---

希望它能帮助

谢谢你的输入，但是代码不适合我。我已经用你的代码更新了我的小提琴。你能看一下吗？也许我用错了。再次感谢您的帮助，但它仍然不起作用。输出/心脏仍未保存在本地存储器中。

jQuery(function ($) {

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


      $("input[type=text]").val(function () {
          return localStorage.getItem(this.id);
      });

      $("input[type=text]").on("change", function () {
          localStorage.setItem(this.id, $(this).val());
      });
  }
});

 $("input[type=text]").each(function(){
     $(this).val(localStorage.getItem(this.id));
 });


 $("input[type=text]").on("change", function () {

     localStorage.setItem(this.id, $(this).val());
 });

$(document).ready(function () {

    $('.clickheart').click(function () {
        $(this).find(".output").html(function (i, val) {
            if (val < 1) {

                $(this).addClass('heartrood');
                localStorage.setItem("hearts",  val * 1 + 1);
                return val * 1 + 1;

            } else {
                $(this).removeClass('heartrood');
                localStorage.setItem("hearts",  val * 1 - 1);
                return val * 1 - 1;
            }
        });
    });


});