Javascript localStorage.getItem检索'；空'；

我试图获取一个按钮被按下次数的计数器，但当我试图在函数外部检索它时，结果却是“null”

HTML:

---

代码确实有效。但是，您必须确保在加载页面之前解释了

计数器

函数。将JS放在文档的末尾

标题

，或者使用

addEventListener

重写onlick，您应该将其转换为整数

function counter() {
var elem = document.getElementById('counter1');
var count = localStorage.getItem('count');
if (count == null) {
    count = 0;
}
count = parseInt(count);
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;

---

请再试一次

使代码更干燥一点，这样可以节省一点时间来验证计数器是否具有“真实”值。对于其余部分，不再鼓励在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元素中删除counter函数，如

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

是的，我加入了！
已注册通讯的人数：

0

这段代码的一个示例可以在这里找到（这里没有，因为stackoverflow不支持本地存储）

现在，我唯一真正担心的是你的HTML文本，请注意，localStorage将是所有客户端的个人存储，因此，如果这是一个从internet运行的网站，所有到达该网站的人都将从null（或0）开始，并且每次单击按钮时只增加1，你将一点也不知道，因为它是本地存储

---

当然，如果你在一台计算机上处理它，人们必须输入他们的数据，那么你至少有一些数据存储在本地，但这并不是一个你可以使用的真正的存储；）

getItem/setItem在执行didFinish之前不可用，除非

---

localStorage.getItem（'count'）

如果密钥不存在，则返回

null

。一旦您在

计数器
函数中设置它，它就可以正常工作。看起来是异步的issue@OsmanGoniNahid你为什么这么想？这里没有异步操作。您只需使用函数调用
counter（）替换函数后面的所有代码即可。现在的问题是，函数之后的代码在调用函数之前进行了计算。我确信get和set的localStorage都是异步的。顺序在这里没有太大的区别。重要的一点是，如果使用了
onclick
，那么
计数器是全局的。这是错误的。本地存储将始终另存为字符串，get将始终返回字符串。不管传递给set的类型是什么。啊！我明白了，非常感谢你！这解决了我的问题！是的，对于这个本地存储，它只是为了演示，以显示它的工作原理，因为我们只在一个设备上使用它。
// 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' );
} );

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