当前位置：马春杰杰 > 教程 > 正文

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

发表日期：2023-02-19 马春杰杰分类：教程评论(0)

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

这里用到的是localStorage，localStorage是一种持久性的本地存储，可以存储键值对，使用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>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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

赞一个 (0)收藏 (0)

如果你对这篇文章有什么疑问或建议，欢迎下面留言提出，我看到会立刻回复！

打赏

未经允许不得转载：马春杰杰 » HTML如何限制按钮点击次数并且刷新页面不重置点击量

马春杰杰

好好学习，天天向上。加油！！！TG群

相关推荐

留个评论吧~ 抢沙发评论前登陆可免验证码！

马春杰杰博客始建于2017年6月14日，博客主要分享网站建设中遇到的问题及解决方案、自己在读书过程中的心得体会及分享一些自觉有意义的音视频内容，记录些生活中的琐事，希望博客能督促怠惰的自己不断学习，不断进步。

不公开

※ 微博 ※

不公开

※ 支付宝好友 ※

不公开

※ 个人QQ号 ※

精彩直达

友情链接视频解析简历生成表白网页联系我们给我留言

TG群
TG群
微信群
微信群

订单信息（价格单位：马杜币）

*商品名称：
*商品单价：
*商品数量：

收货信息商店（虚拟商品除邮箱外可不填）

收货姓名：
收货地址：
收货邮编：
用户邮箱：
电话号码：
手机号码：
留言备注：

总金额：1.00 马杜币