我试图获取按下按钮的次数的计数器,但是当我尝试在函数外部检索它时,它会导致“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;
最佳答案
让你的代码更加 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。
当然,如果您在一台计算机上处理它,人们必须在其中输入数据,那么您至少在本地存储了一些数据,但这仍然不是您可以使用的真正存储;)
关于javascript - localStorage.getItem 检索 'null',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51697301/