Question

每次刷新页面时，本地存储数据都不会显示在“ test-div”中。任何想法为什么会这样？当我从控制台运行localStorage时，每次刷新时仍可以看到它刚刚从“ test-div”中删除的数据。

$(document).ready(function(){

 $('.modal').modal();

   $(".btn-add-basket").click(function(){
  
    var parent_id = $(this).parent().parent().clone();
    var itemName= parent_id[0].querySelector("h4").innerText;
    var itemPrice = parent_id[0].querySelector("span").innerText;
    var itemImage= parent_id[0].querySelector("img").src;
    var testDiv = $(".test-div");
    
     var fullItem = {
       itemName: itemName,
       itemPrice: itemPrice,
       itemImage: itemImage
     };

  localStorage.setItem("my-items", JSON.stringify(fullItem));
  storedItems = JSON.parse(localStorage.getItem("my-items"));
  console.log(storedItems);
  $(".test-div").append(storedItems.itemName);
});

});

Answer 1

在顶部移动localStorage.getItem

$(document).ready(function () {

  $('.modal').modal();

  const storedItems = JSON.parse(localStorage.getItem("my-items"));
  $(".test-div").append(storedItems.itemName);

  $(".btn-add-basket").click(function () {

    var parent_id = $(this).parent().parent().clone();
    var itemName = parent_id[0].querySelector("h4").innerText;
    var itemPrice = parent_id[0].querySelector("span").innerText;
    var itemImage = parent_id[0].querySelector("img").src;
    var testDiv = $(".test-div");

    var fullItem = {
      itemName: itemName,
      itemPrice: itemPrice,
      itemImage: itemImage
    };

    localStorage.setItem("my-items", JSON.stringify(fullItem));
    $(".test-div").append(fullItem.itemName);
  });
});

Answer 2

$（“。test-div”）。append（storedItems.itemName）;在点击功能中。

如果（也）将其添加到单击之外，则将在页面加载时显示。或者，您可以将其添加到点击上方或下方

if (localStorage.getItem(storedItems) !== null) {
   $(".test-div").append(storedItems.itemName);
}

Answer 3

在准备就绪功能的顶部，从存储中读取内容并将这些项（如果有的话）附加到测试div。

$(document).ready(function() {

  const storedItems = localStorage.getItem("my-items");
  if (storedItems !== null) {
    const storedValues = JSON.parse(storedItems);
    $(".test-div").append(storedValues.itemName)
  }

  ...

Answer 4

问题在于，在文档准备就绪时，您不会读取本地存储内容，而仅在单击按钮时，才尝试在按钮的单击回调后移动最后3行：

$(document).ready(function(){

 $('.modal').modal();

 $(".btn-add-basket").click(function(){
  
    var parent_id = $(this).parent().parent().clone();
    var itemName= parent_id[0].querySelector("h4").innerText;
    var itemPrice = parent_id[0].querySelector("span").innerText;
    var itemImage= parent_id[0].querySelector("img").src;
    var testDiv = $(".test-div");
    
     var fullItem = {
       itemName: itemName,
       itemPrice: itemPrice,
       itemImage: itemImage
     };

  localStorage.setItem("my-items", JSON.stringify(fullItem));
  $(".test-div").append(fullItem.itemName);
});

  storedItems = JSON.parse(localStorage.getItem("my-items"));
  console.log(storedItems);
  if(storedItems) {
     $(".test-div").append(storedItems.itemName);
  }

});

准备好文档后，单击后将在按钮上附加一个处理程序，然后它将读取您的本地存储空间。

刷新后不再显示本地存储数据

4 个答案: