显示按钮单击并将该数据存储在本地存储中的计数器答案

【问题标题】：Counter that shows click of the button and stores that data with localstorage显示按钮单击并将该数据存储在本地存储中的计数器
【发布时间】：2020-10-09 09:16:38
【问题描述】：

我有一个表单，点击后会重定向到一个页面。但是，我希望另外，当点击发生时，它会激活一个计数器，并且即使在页面关闭后这个计数器也会继续显示。

我尝试用 localstorage 来做这个，我可以存储第一次点击，但我不能显示或存储其他人

这是我的代码

document.getElementById('contadorInscritos').value = localstorage.contadorInscritos;

var salvarClique = function() {
  var clickcount = document.getElementById('contadorInscritos').value;
  localStorage.setItem('contadorInscritos', 'contadorInscritos');
}   

document.onclick = salvarClique

let contadorInscritos = 0;  
function clickbutton(){  
  contadorInscritos ++;
  document.querySelector('#contadorInscritos').innerHTML = contadorInscritos * 5 + ' novos inscritos';
}

<form id="forms_layout">
  <div>
    <div class="email labels" id="email_label_mail">
      <input class="input_labels" id="email" maxlength="80" name="email" type="email" size="20" required />
      <span class="placeholder_input" data-placeholder="E-mail"></span>
    </div>
    <span id="email_message_error" class="message_error">Email inválido.</span>

    <div class="first_name labels" id="email_label_name">
      <input class="input_labels" id="first_name" maxlength="40" name="first_name" size="20" required />
      <span class="placeholder_input" data-placeholder="Nome"></span>
    </div>
    <span id="first_name_message_error" class="message_error">Nome obrigatório.</span>

    <div class="phone labels" id="email_label_phone">
      <input title="Insira um formato de telefone válido" class="input_labels" id="phone" minlength="15" maxlength="15" name="phone" size="20" pattern="(d{2})d{5}-d{4}" />
      <span class="placeholder_input" data-placeholder="Celular"></span>
    </div>
    <span id="phone_message_error" class="message_error">Formato de Telefone inválido.</span>
  </div>
  
  <div class="connect_icon py-1">
    <button id="button_layout" class="button_layout" type="button" onclick="clickbutton()">
      <b id="lblBotao">QUERO ME INSCREVER</b>
      <div id="divSpiner" class="spinner-border" role="status" style="display: none;">
      <span class="sr-only">Enviando...</span>
    </div>
    <div class="send__icon">
      <i class="fa fa-chevron-right" aria-hidden="true"></i>
    </div>
    </button>
  </div>

  <p style="color: white; font-weight: 600; padding-top: 10px; text-align: center;">
    <span id="contadorInscritos"> novos inscritos</span>
  </p>
</form>

【问题讨论】：

标签： javascript html css local-storage

【解决方案1】：

从 localStorage 获取数据时，您需要使用 getItem 方法。
当您使用 setItem 时，您将第二个参数作为字符串而不是作为变量传递。

我建议你将计数器元素分开。

 // save counter element to a variable:
 var counterElement = document.getElementById('contadorInscritos');

 // fetch contadorInscritos from localStorage
 var contadorInscritos = localStorage.getItem('contadorInscritos');

 // in case there is no value already in localStorage:
 if (!contadorInscritos) { contadorInscritos = 0; }

 // update the dom with the vale fetched from storage:
 counterElement.innerText = contadorInscritos * 5;

 // save contadorInscritos to localStorage whenever document is clicked
 var salvarClique = function (event) {
     localStorage.setItem('contadorInscritos', contadorInscritos);
 };

 document.onclick = salvarClique;

 // handle button clicks:
 function clickbutton() {
     contadorInscritos++;
     counterElement.innerHTML = contadorInscritos * 5;
 }

【讨论】：