马春杰杰 Exit Reader Mode

HTML如何限制按钮点击次数并且刷新页面不重置点击量

这里用到的是localStoragelocalStorage是一种持久性的本地存储,可以存储键值对,使用JavaScript API来访问和存储数据,存储的数据没有时间限制,除非用户手动删除它们。

使用方法也很简单:

<button id="clickButton" onclick="limitClick()">Click Me</button>

<script>
    let count = localStorage.getItem('count') || 0;
    function limitClick() {
        if (count < 2) {
            count++;
            localStorage.setItem('count', count);
            alert('You have clicked this button ' + count + ' times');
        } else {
            document.getElementById('clickButton').disabled = true;
            alert('You have reached the limit of clicking this button!');
        }
    }
</script>

 

本文最后更新于2023年2月13日,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!