如何用HTML/JS结合Cookie实现点击递增且跨访问持久化的计数器

原代码核心错误点 #

• 未定义getValue方法，读取Cookie值应该直接调用已经写好的getCookie函数
• 存储键名Counter是字符串，需要加单/双引号包裹，否则会被识别为未声明变量直接触发报错
• setCookie函数中document.cookie(cname)写法错误，document.cookie是字符串属性不是可调用函数，该判断逻辑完全多余
• 从Cookie读取的计数值是字符串格式，直接加1会触发字符串拼接而非数值计算，需要先转为数字格式
• 页面初始化时没有读取Cookie中的已有值填充到输入框，刷新后页面会显示空值

持久化方案说明 #

如果只是纯前端本地存储需求，localStorage 比Cookie更合适：Cookie的设计初衷是用于前后端数据传递，有4KB大小限制，每次站点请求都会自动携带，而localStorage是专门的前端本地存储API，用法更简单，默认永久存储，更适配这个场景。下面会提供两种实现版本。 #

修复后代码（Cookie版本） #

<html>
    <head>
        <meta charset="utf-8">
        <title>计数器</title>
    </head>
    <body>
        <form id="form1" method="post" name="form1">
            <p>
                <input id="set_Value" name="set_Value" onclick="setValue()" type="button" value="Add 1" />
            </p>
            <p>
                Counter:<label><input id="bbb" name="bbb" type="text" /> </label>
            </p>
        </form>
        <script type="text/javascript">
            // 页面加载时先填充已有计数值
            window.onload = function() {
                document.getElementById('bbb').value = getCookie('Counter') || 0;
            }
            
            function getCookie(cname) {
                var name = cname + '=';
                var decodedCookie = decodeURIComponent(document.cookie);
                var ca = decodedCookie.split(';');
                for(var i = 0; i <ca.length; i++) {
                    var c = ca[i];
                    while (c.charAt(0) == ' ') {
                        c = c.substring(1);
                    }
                    if (c.indexOf(name) == 0) {
                        return c.substring(name.length, c.length);
                    }
                }
                return '0';
            }
            function setCookie(cname, value) {
                document.cookie = cname + '=' + value + ';path=/';
            }
            function setValue() {
                // 先转数字再加1避免字符串拼接
                const currentCount = Number(getCookie('Counter'));
                setCookie('Counter', currentCount + 1);
                document.getElementById('bbb').value = currentCount + 1;
            }
        </script>
    </body>
</html>

更简化的localStorage实现版本（推荐） #

<html>
    <head>
        <meta charset="utf-8">
        <title>计数器</title>
    </head>
    <body>
        <input onclick="addCount()" type="button" value="Add 1" />
        <p>Counter: <input id="countInput" type="text" /></p>
        <script>
            // 初始化填充存储的数值
            window.onload = () => {
                document.getElementById('countInput').value = localStorage.getItem('counter') || 0;
            }
            function addCount() {
                const current = Number(localStorage.getItem('counter')) || 0;
                const newCount = current + 1;
                localStorage.setItem('counter', newCount);
                document.getElementById('countInput').value = newCount;
            }
        </script>
    </body>
</html>

内容的提问来源于stack exchange，提问作者KevinLester77