javascript - localStorage.getItem 检索 'null'

Question

我试图获取按下按钮的次数的计数器，但是当我尝试在函数外部检索它时，它会导致“null”。

HTML:

<button class="signupbutton" onclick="counter()"> Yes I'm in!</button>
<div id="counter">
    <p>Number of people that have signed up for the newsletter: </p>
    <div id="counter1">0</div>
</div>

Javascript:

function counter() {
    var elem = document.getElementById('counter1');
    var count = localStorage.getItem('count');
    if (count == null) {
        count = 0;
    }
    count++;
    localStorage.setItem('count', count);
    elem.innerHTML = count;
}
console.log(localStorage.getItem('count'));
var count1 = localStorage.getItem('count');
var elem = document.getElementById('counter1');
elem.innerHTML = count1;

Answer 1

让你的代码更加 DRY 可以节省你一些时间，以验证你的计数器是否具有“真实”值。对于其余的，不再鼓励 html 元素内的 onclick ，您只需更新代码即可

// wait until the page has loaded
window.addEventListener('load', function() {
  // get your elements once
  const counterElement = document.querySelector('#counter1');
  const signupButton = document.querySelector('.signupbutton');

  // assign a click event to your button
  signupButton.addEventListener('click', updateCounter);

  // function to retrieve the counter from your localStorage
  function getKeyOrDefault( key, defaultValue = 0 ) {
    return localStorage.getItem( key ) || defaultValue;
  }

  function updateCounter( e ) {
    let counter = parseInt( getKeyOrDefault( 'counter' ) );
    counter++;
    counterElement.innerHTML = counter;
    localStorage.setItem( 'counter', counter );
    e.preventDefault();
  }
  // set the initial value
  counterElement.innerHTML = getKeyOrDefault( 'counter' );
} );

当然，不要忘记更改您的 html，从 html 元素中删除计数器功能，例如

<button class="signupbutton"> Yes I'm in!</button>
<div id="counter">
    <p>Number of people that have signed up for the newsletter: </p>
    <div id="counter1">0</div>
</div>

此代码的示例可以在 jsfiddle 上找到。 (它不在这里，因为 stackoverflow 不支持本地存储)

现在，我真正担心的唯一一件事是您的 HTML 文本，请注意，localStorage 将是所有客户端的个人存储，因此，如果这是一个从互联网运行的网站，所有到达的人有一次将以 null(或 0)开始，每次单击按钮时都会增加 1，您将一无所知，因为它是 localStorage。

当然，如果您在一台计算机上处​​理它，人们必须在其中输入数据，那么您至少在本地存储了一些数据，但这仍然不是您可以使用的真正存储;)