计数器点击保存 Cookie答案

【问题标题】：Counter Click Save Cookie计数器点击保存 Cookie
【发布时间】：2019-11-22 13:07:06
【问题描述】：

我创建了一个带有计数器显示的简单计数器按钮，但我不知道如何创建 cookie 来保存计数器。

我想保存计数器以显示给下一个用户，如果计数是“10”，当他继续投票时 11

var contador = 1;
var time;
var on = false;
var seconds = 0;


function cambiar() {

  if (seconds >= 10) {
    document.getElementById('contador').innerHTML = contador + 0;
  } else {
    document.getElementById('contador').innerHTML = contador += 1;
  }

}

h1 {
  text-align: center;
  padding-top: 4em;
}

#cuadrito {
  width: 100px;
  padding: 50px;
  margin: 00px auto;
  border-radius: 10px;
  font-weight: bold;
  color: #DAA3A3;
}

#contador {
  font-size: 50px;
  font-weight: bold;
  color: #a3bad8;
}

#boton {
  width: 100px;
  height: 40px;
  border: none;
  font-weight: bold;
  color: #DAA3A3;
}

<body>
  <h1>VOTA BOX</h1>
  <div id="cuadrito">
    <center>
      <div id="contador">0</div>
    </center>
    <br>
    <input type="button" id="boton" value="+1" onClick="cambiar();">
  </div>
</body>

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/API/Document/cookie/…

标签： javascript button cookies counter

【解决方案1】：

您需要使用document.cookie = 'something' 选择器来分配新的cookie。我建议改用 HTML5 localstorage，这是一种更现代的解决方案。

使用 localstorage，您可以使用 window.localStorage.setItem('key', 'value') 在 localstorage 中设置一个值，并使用 window.localStorage.getItem('key') 检索它。

请注意，由于 sn-p 的性质，它将无法在 sn-p 波纹管中正常工作。

// we retrieve the data from the localstorage, or we default back to 1.
var contador = window.localStorage.getItem('count') || 1;
var time; 
var on = false;
var seconds = 0;


function cambiar()
{
  
  if(seconds >= 10){
    document.getElementById('contador').innerHTML = contador + 0;
  }else{
    document.getElementById('contador').innerHTML = contador += 1;
  }
  
  // we save the count value into the localstorage.
  window.localStorage.setItem('count', contador);
}

h1 {
  text-align: center;
  padding-top: 4em;
}

#cuadrito{
  width:100px;
  padding:50px;
  margin:00px auto;
  border-radius:10px;
  font-weight: bold;
  color: #DAA3A3;
}

#contador{
    font-size: 50px;
  font-weight: bold;
  color: #a3bad8;
}
#boton{
  width:100px;
  height:40px;
  border:none;
  font-weight: bold;
  color: #DAA3A3;
}

<body>
	<h1>VOTA BOX</h1>
	<div id="cuadrito"><center>
		<div id="contador">0</div></center>
		<br>
		<input type="button" id="boton" value="+1" onClick="cambiar();">
	</div>
</body>

【讨论】：

【解决方案2】：

你可以像这样保存在localStorage：-

// set counter key
localStorage.setItem('counter', 10);
// get counter key
var counter = localStorage.getItem('counter');

【讨论】：