Question

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

但我想将它与我写的不同功能结合起来。在此功能中，用户可以单击灰色按钮，然后激活＆＃34;它会变成红色，并且会在容器中添加1。它是一个类似按钮＆＃34;。

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

我做了这个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

这是 Updated Fiddle

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


});

Answer 3

Demo Fiddle

检索并保存总点击次数
var result = $(".output").text(); localStorage.setItem('click', result);
如果本地存储中存在密钥，则单击将其显示在div中 if (localStorage.getItem('click') != null) { $('.output').text(localStorage.getItem('click')); }

希望它有所帮助...... !!

本地存储Jquery

3 个答案: