时间戳

首页 > 解决方案 > 如何存储数组在 Javascript 的本地存储中？

javascript - 如何存储数组在 Javascript 的本地存储中？

问题描述

我正在制作一个电子商务网站，但在购物车部分遇到问题。

我将我的购物车定义为一个数组。当用户单击 AddToCart 按钮时，它将将该项目的 < div > 元素存储在数组中。我想将此数组存储在本地存储或任何类型的存储中。这就是我现在所拥有的。

<script>
    function check() {
      console.log(shoppingCart);
      localStorage.setItem("shoppingCart", JSON.stringify(shoppingCart));
      items = JSON.stringify(localStorage.getItem("users"));
      console.log(localStorage);
    }
  </script>

当我添加两个项目时，我的 Firefox 控制台选项卡给了我这个。

Array [ div.item, div.item]                      products.html:88:15
Storage { shoppingCart: "[{},{}]", length: 1 }   products.html:91:15

所以两个项目被添加到本地存储中。但它不是一个 < div > 元素的数组，而是一个空对象的数组。

我的问题是如何在本地存储（或任何其他类型的存储）中添加一组 html < div > 元素，以便在我重新加载网页后我的购物车列表仍然存在。

感谢您阅读我的问题，希望您理解我的问题。

标签： javascripthtmlarrays

解决方案

我根本不会存储div元素，因为人们不会从你那里购买元素，也没有理由用数据和 UI 层内容div膨胀。localStorage相反，存储这些元素包含的数据，稍后，当您需要从存储中取出该数据时，您可以创建div元素（或任何 UI）来保存它们以在页面上显示。

这是一个示例，说明为什么最好不要将演示文稿与数据一起存储。我将向您展示我可以从一组数据创建两个不同的演示文稿（它在 Stack Overflow 代码段环境中不起作用，但它会在这个 Fiddle中起作用）：

let cart = [];
const list = document.querySelector("select");
document.querySelector("button").addEventListener("click", function(){
  cart.push(list.value); // Update the cart
  localStorage.setItem("cart", JSON.stringify(cart)); // store cart
  console.log(localStorage.getItem("cart"));
});

document.querySelector("#show").addEventListener("click", function(){
  // Presentation #1

  // Loop over all the items in the array that is created by
  // converting the JSON in local storage to an array
  JSON.parse(localStorage.getItem("cart")).forEach(function(item){
    let row = document.createElement("div"); // make a div for the item
    row.textContent = item; // populate the div
    document.body.appendChild(row); // Put item in doc.
  });
  
  
  // Presentation #2

  // Same data and same technique to access it
  
  let tbl = document.createElement("table");
  
  JSON.parse(localStorage.getItem("cart")).forEach(function(item){
    // But different presentation
    let row = document.createElement("tr"); 
    let cell = document.createElement("td");
    cell.textContent = item; // populate the div
    row.appendChild(cell);
    tbl.appendChild(row);
  });  
  
  document.body.appendChild(tbl); // Put item in doc.
  
});
table, td {
  border:1px solid grey;
  border-collapse:collapse;
}
<select>
  <option>Item 1</option>
  <option>Item 2</option>
  <option>Item 3</option>
  <option>Item 4</option>
  <option>Item 5</option>
  <option>Item 6</option>  
</select>
<button>Add to cart</button>
<button id="show">Show Cart</button>

推荐阅读