本地存储Jquery

Question

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

但是我想把它和我写的一个不同的函数结合起来。在这个功能中，用户可以点击一个灰色的按钮，然后“激活”它，使它变成红色，它会在容器中添加一个1。这是一个“喜欢”按钮。

那么如何使用本地存储来保存点击计数器信息(按钮变红，值更新)？

我做了这个jsfiddle：http://jsfiddle.net/Yazuri/7ZxMK/

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());
      });
  }
});

Answer 1

这是您的

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


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

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

你不能这样写它，$("input[type=text]").val(function () {})。val上没有事件。

Answer 2

你可以存储来自“红心”的计数

更新了你的小提琴

JSFIDDLE

$(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;
            }
        });
    });


});