无法从 LocalStorage Jquery 获取数组

Posted 2023-05-09

【中文标题】无法从 LocalStorage Jquery 获取数组

【英文标题】：Unable to get Array from LocalStorage Jquery

【发布时间】：2021-10-25 05:51:43

【问题描述】：

我创建了一个数组并动态添加列表项，将其保存到localStorage。

数组已正确保存在 localStorage 中，但我无法将其取回并将其附加到 DOM。

const arr = [];

var cartItem = $(
  "<li class='newItem'> <p class='id'>1</p> <div class='details'><p class='name'>Orange</p><span class='weight'>20</span><span> /</span> <span class='avail'>In Stock</span> <p class='price'>10</p><a type='button' class='inc'>+</a><input type='text' class='quantity' value='1' ><a type='button' class='dec'>-</a></div> <a type='button' class='removeItem'><i class='fa fa-trash'></i></a></li>"
);
var cartItem2 = $(
  "<li class='newItem'> <p class='id'>2</p> <div class='details'><p class='name'>Orange</p><span class='weight'>20</span><span> /</span> <span class='avail'>In Stock</span> <p class='price'>10</p><a type='button' class='inc'>+</a><input type='text' class='quantity' value='1' ><a type='button' class='dec'>-</a></div> <a type='button' class='removeItem'><i class='fa fa-trash'></i></a></li>"
);

arr.push(cartItem, cartItem2);

localStorage.setItem("cartItem", JSON.stringify(arr));
var data = localStorage.getItem("cartItem");
var updatedData = JSON.parse(data);
$("#temp").append(updatedData);

【问题讨论】：

您能否分享您的 html 以进一步了解该问题

【参考方案1】：

我发现您的代码中存在的问题是：

使用cartItem2= "<li class 而不是cartItem2= $("<li class，因为数组项在保存到localStorage 时不能是DOM 元素。

检查下面的代码，即使 它在 SO 中抛出错误 sn-p，我检查了我的本地并且 它正在工作正如预期的那样。

$(document).ready(function () 
      var arr = [];

      var cartItem =
        "<li class='newItem'> <p class='id'>1</p> <div class='details'><p class='name'>Orange</p><span class='weight'>20</span><span> /</span> <span class='avail'>In Stock</span> <p class='price'>10</p><a type='button' class='inc'>+</a><input type='text' class='quantity' value='1' ><a type='button' class='dec'>-</a></div> <a type='button' class='removeItem'><i class='fa fa-trash'></i></a></li>";
      var cartItem2 =
        "<li class='newItem'> <p class='id'>2</p> <div class='details'><p class='name'>Orange</p><span class='weight'>20</span><span> /</span> <span class='avail'>In Stock</span> <p class='price'>10</p><a type='button' class='inc'>+</a><input type='text' class='quantity' value='1' ><a type='button' class='dec'>-</a></div> <a type='button' class='removeItem'><i class='fa fa-trash'></i></a></li>";
      arr = [cartItem, cartItem2];

      localStorage.setItem("cartItem", JSON.stringify(arr));
      var data = localStorage.getItem("cartItem");
      var updatedData = JSON.parse(data);
      $("#temp").append(updatedData);
    );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul id="temp"></ul>