计数器点击保存Cookie

2024-05-19 • 问答

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

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

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>

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

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

请注意，由于代码段的性质，该代码段无法在代码段中正常工作。

// 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>

您可以像这样将其保存在localStorage中：-

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

计数器点击保存Cookie

a270207 回答：计数器点击保存Cookie

大家都在问