javascript - 使用javascript重新加载页面时如何更改按钮的名称并保存它
问题描述
我有一个带有按钮的页面,当我单击它时它会更改,但是如果我重新加载页面,它会按原样返回而不更改 html
<button onload="form1.reset();" class="button" id="movetool10" onclick="movetool10();stoptool10()">حجز</button>
javascript
var clickCounter10 = 0;
var movetool10 = document.getElementById('movetool10')
movetool10.onclick = function() {
clickCounter10++;
if (clickCounter10 ===2) {
clickCounter10 = 0;
document.getElementById('movetool10').innerHTML = 'click !';
}
else {
document.getElementById('movetool10').innerHTML = 'click me';
}
};
解决方案
您可以使用 localStorage,将最后一个计数器值保存在那里并在开始时获取它,如果存在,请使用它。否则,在第一次渲染时将计数器初始化为 0(或有人清除 localStorage)。请注意,这仅在客户端,因此如果用户清除 localStorage,计数器将重新初始化。
现在,该按钮从其最后一个状态显示。它在两种状态之间切换,您可以根据需要更改逻辑,但这就是您可以使用 localStorage 的方式。
var clickCounter10 = window.localStorage.getItem('clickCounter10') || 0;
var movetool10 = document.getElementById('movetool10');
changeBtn();
movetool10.onclick = function() {
clickCounter10++;
window.localStorage.setItem('clickCounter10', clickCounter10);
changeBtn();
};
function changeBtn() {
clickCounter10 = parseInt(clickCounter10, 10);
if (clickCounter10 === 2) {
clickCounter10 = 0;
document.getElementById('movetool10').innerHTML = 'click !';
} else if(clickCounter10 !== 0) {
document.getElementById('movetool10').innerHTML = 'click me';
}
}
推荐阅读
- angular - 无法通过 BehaviorSubject 访问数据的属性。BehaviorSubject 上不存在属性
- android - 将 REST Api 响应的值返回给调用函数
- python - 处理文件时如何正确处理错误?
- javascript - 在同位素中以任何顺序匹配单词(使用输入值)
- c# - 当UI中的事件被另一个线程中的对象触发而不调用跨线程操作异常时,如何处理它?
- sql - 按国家和条件索引计算 SQL 分区中的市场总和
- javascript - 在循环内时,我的 jQuery 函数不会应用于元素
- angular - Angular - 具有相同域的多个站点的服务工作者
- java - java.net.SocketTimeoutException:在 FTPClient.listFiles 处读取超时
- python - 生成 TFrecord 时出现问题