为什么我的本地存储在刷新后不保留变量的值？

问题描述

因此，我有一些代码想在转到另一页后保留某个变量的值，当我返回到原始页面并按某个按钮时，它会增加它的值并保持已扩展的值。问题在于代码似乎无法按预期工作。变量的默认值是0，在按下按钮时，它的值增加了2，并使用localstorage保存，然后我被发送到另一页，然后当我返回原始页面并再次按下相同的按钮时，变量是再次2.为什么？ 这是我的代码：

$(document).ready(function()
{
    var isShoes = false
    var isShirt = false
    var oneMoreShoe = false
    var buttonClicked = 0;

    $('#purchaseShoes').on('click',function()
    {
        buttonClicked+=2;
        var Shoes = localStorage.setItem('img_shoes','/static/Images/Sneakers.png')
        var clicksCounter = localStorage.setItem('buttonClicked',JSON.stringify(buttonClicked))
        var retainClicksCount = localStorage.getItem('buttonClicked')
        var actualClickCount = JSON.parse(retainClicksCount)
        isShoes = localStorage.setItem('isShoes',true)
        alert(retainClicksCount)
        if(retainClicksCount>= 4){
            oneMoreShoe = localStorage.setItem('oneMoreShoe',true)
         }
    })
    
})

解决方法

$(document).ready(function()
{
    var isShoes = false
    var isShirt = false
    var oneMoreShoe = false
    var buttonClicked = 0;
    
    if (localStorage.getItem('buttonClicked')) // check if button click exists in storage and assign it to your variable
    {
        buttonClicked = localStorage.getItem('buttonClicked');
    }
    $('#purchaseShoes').on('click',function()
    {
        buttonClicked+=2;
        var Shoes = localStorage.setItem('img_shoes','/static/Images/Sneakers.png')
        var clicksCounter = localStorage.setItem('buttonClicked',JSON.stringify(buttonClicked))
        var retainClicksCount = localStorage.getItem('buttonClicked')
        var actualClickCount = JSON.parse(retainClicksCount)
        isShoes = localStorage.setItem('isShoes',true)
        alert(retainClicksCount)
        if(retainClicksCount>= 4){
            oneMoreShoe = localStorage.setItem('oneMoreShoe',true)
         }
    })
})

每次更新页面时，buttonClicked变量变为=0。您需要检查是否存在局部变量，如果是这样，则可以从localstorage中获取脚本变量的值，然后添加2并使用它。