存储按钮点击

Question

我有一个按钮点击计数器，但是如果我刷新页面，它会设置回'0'。我如何存储输入的值，因此，如果关闭浏览器，上一个 编号将保持不变？

$(function() {
  $('.counter').click(function() {
    $(this).val(parseInt($(this).val()) + 1);
  });
});

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

<input type="button" class="counter" value="0">

Answer 1

我们可以使用其中任何一种 本地存储， 会话存储， 饼干， 查询字符串，

Answer 2

您可以使用本地存储来存储键/值对。这是一个如何使用它的示例：

$(document).ready(function() {  

  //Firstly check if buttonClickCounter is in local storage from before.
  if(localStorage.getItem("buttonClickCounter") === null){
    //buttonClickCounter is not in local storage.

  }else{
    //buttonClickCounter is in local storage.
    var counter = localStorage.getItem("buttonClickCounter");   
    //insert the counter value into the HTML.   
    $('.counter').val(counter);     
  }


  $('.counter').click(function() {
    var newValue = parseInt($(this).val()) + 1;
    $(this).val(newValue);
    //store the new counter value in local storage.
    localStorage.setItem('buttonClickCounter', newValue);   
  });

});

可以在控制台的“应用程序”选项卡下检查本地存储值，如下所示：

Answer 3

您可以为此使用localstorage或cookies。
看看这些网站：
本地存储：Localstorage
Cookies： Cookies

示例localstorage：

var buttonvalue = $('.counter').val();
localStorage.setItem("buttonvalue", buttonvalue);
// get value of button
var someVarName = localStorage.getItem("buttonvalue");

对于Jquery中的cookie，您应该包含一个库：
https://github.com/carhartl/jquery-cookie

然后您可以使用此：

$.cookie("buttonvalue", $('.counter').val());
var cookieValue = $.cookie("buttonvalue");