使用localStorage传递数据的计数器计数回退问题及解决方案

我正在开发一个天数计数器，计划通过localStorage将计数数据传递至另一页面，点击按钮时继续累加计数。当前数据可正常传递并显示初始数值，但点击按钮计数时，数值会回退至0，无法基于传递的初始值进行累加，寻求技术帮助。

原代码 #

第一页代码 #

<body>
    <button type="button" onClick="onClick()">Click me</button>
<p>Clicks: <a id="clicks">0</a></p>
    
    <a href="pruebaCounter.html">
    <button onClick="hacerCosa()">Beach</button><br />
    </a>
    
    <script>
        var d = localStorage.getItem("d");
        document.getElementById("clicks").innerHTML = d;
        
        localStorage.clear();
     var clicks = 0;

function onClick() {
  clicks += 1;
  document.getElementById("clicks").innerHTML = clicks;
    var d = document.getElementById('counter').innerHTML;
        localStorage.setItem('d', d);
};
        
        function hacerCosa(){
            var d = document.getElementById('clicks').innerHTML;
        localStorage.setItem('d', d);
        }
    </script>
</body>

第二页代码 #

<body>
    <button type="button" onClick="onClick()">Click me</button>
<p>Clicks: <a id="clicks">0</a></p>
    <script>
        var d = localStorage.getItem("d");
        document.getElementById("clicks").innerHTML = d;
        
        localStorage.clear();
     var clicks = 0;

function onClick() {
  clicks += 1;
  document.getElementById("clicks").innerHTML = clicks;
};
    </script>
</body>

问题分析 #

• 变量初始化逻辑错误：两个页面的clicks变量都固定初始化为0，没有利用从localStorage获取到的传递值来初始化，导致点击按钮时直接从0开始累加，忽略了传递过来的初始计数。
• 元素选择错误：第一页的onClick函数中尝试获取id为counter的元素，但页面中不存在该元素，导致存入localStorage的内容无效。
• localStorage清空时机：页面加载后立即执行localStorage.clear()，虽然不影响当前显示，但会导致后续无法再次读取历史传递数据。

解决方案（双向页面计数传递） #

修正后的第一页代码 #

<body>
    <button type="button" onClick="onClick()">Click me</button>
<p>Clicks: <a id="clicks">0</a></p>
    
    <a href="pruebaCounter.html">
    <button onClick="hacerCosa()">Beach</button><br />
    </a>
    
    <script>
        if (localStorage.getItem("d") !== null){
        var d = localStorage.getItem("d");
        document.getElementById("clicks").innerHTML = d;
        
        localStorage.clear();
     var clicks = parseInt(d);
        } else {
            var clicks = 0;
        }

function onClick() {
  clicks += 1;
  document.getElementById("clicks").innerHTML = clicks;
    var d = document.getElementById('counter').innerHTML;
        localStorage.setItem('d', d);
};
        
        function hacerCosa(){
            var d = document.getElementById('clicks').innerHTML;
        localStorage.setItem('d', d);
        }
    </script>
</body>

修正后的第二页代码 #

<body>
    <button type="button" onClick="onClick()">Click me</button>
<p>Clicks: <a id="clicks">0</a></p>
    
    <a href="pruebaCounter2.html">
    <button onClick="hacerCosa()">cave</button><br />
    </a>
    <script>
        if (localStorage.getItem("d") !== null){
        var d = localStorage.getItem("d");
        document.getElementById("clicks").innerHTML = d;
        
        localStorage.clear();
     var clicks = parseInt(d);
        } else {
            var clicks = 0;
        }

function onClick() {
  clicks += 1;
  document.getElementById("clicks").innerHTML = clicks;
};
        
         function hacerCosa(){
            var d = document.getElementById('clicks').innerHTML;
        localStorage.setItem('d', d);
        }
    </script>
</body>

关键修改说明 #

1. 动态初始化计数变量：页面加载时先检查localStorage中是否存在传递的计数d，如果存在则将clicks初始化为该数值（通过parseInt转换为数字类型，避免字符串拼接问题），否则初始化为0。
2. 补充双向传递逻辑：两个页面都添加了hacerCosa函数，点击跳转按钮时将当前计数值存入localStorage，实现页面间的双向计数传递。
3. 修复元素选择错误：第一页onClick函数中document.getElementById('counter')应为document.getElementById('clicks')，否则存入localStorage的内容会无效，建议修正该元素选择器。
4. 保留localStorage清空逻辑：（可选）如果不需要保留历史传递数据，可保留localStorage.clear()；若需要持久化计数，可移除该语句并直接基于localStorage进行读写操作。

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