Javascript：本地存储问题

Question

我正在尝试创建一个带有本地存储的购物车功能，它会记住购物篮中的物品，但是在重新加载后，当我向购物篮中添加或删除物品时，它会再次从 0 开始。

let current = 0
let locstor = ''

function loadlocal() {
  let locstor = ''
  document.getElementById("basket").innerHTML = localStorage.getItem(locstor)
  locstor = localStorage.getItem(locstor)
  return locstor
}

function addItem() {
  current = document.getElementById("productStat").innerHTML = current + 1
  localStorage.setItem(locstor, current)
  document.getElementById("basket").innerHTML = localStorage.getItem(locstor)
}

function removeItem() {
  if (current < 1) current = 0;
  else
    current = document.getElementById("productStat").innerHTML = current - 1
  
  localStorage.setItem(locstor, current)
  document.getElementById("basket").innerHTML = localStorage.getItem(locstor)
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Productpagina</title>
  <link href="buyingFunction.css" rel="stylesheet">


</head>

<body onload="loadlocal()">
  <p>
    <button onclick="removeItem()">-</button>
    <span id="productStat">&nbsp;0&nbsp;</span>
    <button onclick=addItem()>+</button>
  </p>

  <div>
    <button id="basket">0</button>
  </div>

  <script src="buyingFunction.js"></script>
</body>

</html>

我希望有人能解释我所缺少的东西。

Answer 1

问题在于您如何使用

locstor

变量。您声明了

locstor

变量两次，一次在全局范围之外，一次在 loadlocal 函数内。这导致全局变量未在函数内更新，因此您使用了一个空的局部变量，该变量与本地存储无关，然后您尝试使用

locstor

变量存储和检索值，但它是不将其与本地存储中的特定密钥相关联。问题是您如何使用 locstor 变量。您声明了 locstor 变量两次，一次在全局范围之外，一次在 loadlocal 函数内。这导致全局变量未在函数内更新，因此您使用了一个空的局部变量，该变量与本地存储无关，然后您尝试使用 locstor 变量存储和检索值，但它没有关联这与本地存储中的特定密钥有关。

要解决此问题，您可以删除 locstor 变量，因为您的情况不需要它，并使用键“basketCount”将购物车项目计数器存储在本地存储中。通过这样做，当您加载页面时，您现在可以使用 localStorage.getItem('basketCount') 从本地存储中检索计数器值，并使用该值更新当前变量，如下所示：

// Initialize the 'current' variable with 0.
let current = 0;

function loadlocal() {
  // Retrieve the item count in the cart from local storage.
  current = parseInt(localStorage.getItem("basketCount")) || 0;
  
  // Update the content of the 'productStat' element to reflect the current count.
  document.getElementById("productStat").innerHTML = current;
  
  // Update the content of the 'basket' element to reflect the current count.
  document.getElementById("basket").innerHTML = current;
}


function addItem() {
  // Increment the current count.
  current++;
  
  // Store the new count in local storage.
  localStorage.setItem("basketCount", current);
  
  // Update the content of the 'productStat' element to reflect the current count.
  document.getElementById("productStat").innerHTML = current;
  
  // Update the content of the 'basket' element to reflect the current count.
  document.getElementById("basket").innerHTML = current;
}


function removeItem() {
  // Ensure that the count is not less than zero.
  if (current > 0) {
    // Decrement the current count.
    current--;
    
    // Store the new count in local storage.
    localStorage.setItem("basketCount", current);
  }
  
  // Update the content of the 'productStat' element to reflect the current count.
  document.getElementById("productStat").innerHTML = current;
  
  // Update the content of the 'basket' element to reflect the current count.
  document.getElementById("basket").innerHTML = current;
}

Answer 2

德王尔德，

localStorage 对象允许您在浏览器中保存键/值对，这需要键名称和我们要为该键存储的值。

localStorage.setItem(key, value);

示例：

localStorage.setItem("lastname", "Smith");
localStorage.getItem("lastname");

分析你的代码后，我得到以下内容：

您正在使用
```
locstor
```
作为键，但尚未定义该键的名称。例如。姓氏、用户名等...
在
```
loadlocal()
```
方法中，您尝试使用空白字符串设置键名称，例如
```
let locstor = ''
```
在
```
loadlocal()
```
方法中，您再次尝试使用 getdata 设置键名称，键值使键名称为“null”
```
locstor = localStorage.getItem(locstor)
```
您需要另一个变量来从本地存储存储和检索购物篮值。

因此，请查看下面的代码以及注释，以解释需要实施的更改，并让我知道您是否需要进一步的帮助。

let current = 0;

// 1. This will be static the Key name.
let locstor = 'basket'; 

// 2. Variable to store and retrive updated or last saved value in localstorage
// ====================
let basketItems = 0; 

function loadlocal() {
    // 3. Remove this line because store name (Key) can not be blank, null or empty
    // let locstor = '';

    document.getElementById("basket").innerHTML = localStorage.getItem(locstor);

    // 4. Retrive latest store value from localStorage and assign it to new variable instead of replacing it with key
    basketItems = localStorage.getItem(locstor);

    return basketItems;
}

由于 stackoverflow 代码片段不允许访问 localStorage，因此我分享下面的完整代码。我希望这会有所帮助。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Productpagina</title>
  <link href="buyingFunction.css" rel="stylesheet">

  <script>
    let current = 0;

    // 1. This will be static the Key name.
    let locstor = 'basket';

    // 2. Variable to store and retrive updated or last saved value in localstorage
    // ====================
    let basketItems = 0;

    function loadlocal() {
      // 3. Remove this line because store name (Key) can not be blank, null or empty
      // let locstor = '';

      document.getElementById("basket").innerHTML = localStorage.getItem(locstor);

      // 4. Retrive latest store value from localStorage and assign it to new variable instead of replacing it with key
      basketItems = localStorage.getItem(locstor);

      return basketItems;
    }

    function addItem() {
      current = document.getElementById("productStat").innerHTML = current + 1;
      localStorage.setItem(locstor, current);
      document.getElementById("basket").innerHTML = localStorage.getItem(locstor);
    }

    function removeItem() {
      if (current < 1) current = 0;
      else
        current = document.getElementById("productStat").innerHTML = current - 1;

      localStorage.setItem(locstor, current);
      document.getElementById("basket").innerHTML = localStorage.getItem(locstor);
    }
  </script>

</head>

<body onload="loadlocal()">
  <p>
    <button onclick="removeItem()">-</button>
    <span id="productStat">&nbsp;0&nbsp;</span>
    <button onclick=addItem()>+</button>
  </p>

  <div>
    <button id="basket">0</button>
  </div>

  <!-- <script src="buyingFunction.js"></script> -->
</body>

</html>

谢谢，

吉格内什·拉瓦尔

Javascript：本地存储问题

问题描述投票：0回答：2

2个回答

最新问题

Javascript：本地存储问题

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2