javascript - 如何将结果保存到 localStorage

Question

我是 HTML 和 jQuery 的新手，这是我的第一个实现，我不确定它是否正确，我需要你的帮助，我试图使它变得简单计数器开始计算每次点击，并将结果存储在 localStorage 中，这就是我所能做的但它没有用，你能告诉我我做错了什么吗？

谢谢

---

$(function() {
  $('.container li').click(function() {
    var btn = $(this).attr("data-page");
    var element = $('.counter[data-page="' + btn + '"]').html();
    element++
    $('.counter[data-page="' + btn + '"]').html(element);

    localStorage.setItem('save', $('.counter[data-page="' + btn + '"]').html());

    if (localStorage.getItem('save')) {
      $('.counter[data-page="' + btn + '"]').html(localStorage.getItem('save'));
    }
  });
});

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

a {
  text-decoration: none;
  background: blue;
  color: #fff;
  padding: 10px;
}

ul li {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="container">
  <li data-page="facebook">
    <a href="#" class='counter' data-page="facebook">4100</a>
  </li>

  <li data-page="twitter">
    <a href="#" class='counter' data-page="twitter">4100</a>
  </li>
</ul>

Answer 1

您需要先使用 localStorage 中的值初始化您的按钮。然后你不需要再次检索它们，你只需要操作 html 中的值并在 localStorage 中设置新的计数器。

此外，您还需要在本地存储中按按钮设置一个计数器

// Just to make this snippet work,
// because localStorage is forbiden here

// database = localStorage
database = {
  store: {},
  getItem: function(key) {
    return this.store[key];
  },
  setItem: function(key, val) {
    this.store[key] = val;
  },
}

$(function() {
  $(".counter").each((_, element) => {
    const $btn = $(element);
    const key = `save-${$btn.attr("data-page")}`;
    
    $btn.html(database.getItem(key) || 0);
  });
  
  $(".container li").click(function() {
    const $btn = $(this).find(".counter");
    const key = `save-${$btn.attr("data-page")}`;
    const counter = (+$btn.html()) + 1;

    $btn.html(counter);
    database.setItem(key, counter);
  });
});

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

a {
  text-decoration: none;
  background: blue;
  color: #fff;
  padding: 10px;
}

ul li {
  display: inline-block;
}

<ul class="container">
  <li data-page="facebook">
    <a href="#" class="counter" data-page="facebook">4100</a>
  </li>

  <li data-page="twitter">
    <a href="#" class="counter" data-page="twitter">4100</a>
  </li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>