Question

我需要从本地存储中加载数组。

我正在将表单输入添加到本地存储的数组中，如下所示：

document.querySelector("#addMeal").addEventListener("click", newMeal);
function newMeal(e){
e.preventDefault();

let title = document.querySelector("#title").value;
let img = document.querySelector("#img").value;
let book = document.querySelector("#book").value;
let calories = document.querySelector("#calories").value;
let servings = document.querySelector("#servings").value;
let type = document.querySelector("#type").value;
let price = document.querySelector("#price").value;
let cook = document.querySelector("#cook").value;
let quantity = document.querySelector("#quantity").value;

let newMeal={
    id: 23,
    title: title,
    img: img,
    book: book,
    calories: calories,
    servings: servings,
    type: type,
    price: price,
    cook: cook,
    quantity: quantity};
meals.push(newMeal);
console.log(meals);

// Put the object into storage
localStorage.setItem('meals', JSON.stringify(meals));}

现在我需要将该数组加载到另一个页面中。我已经有这部分代码，但是这行不通。有人知道我在做什么错吗？

document.addEventListener('DOMContentLoaded', loadMeals);

function loadMeals() {
let retrievedObject = localStorage.getItem('meals');
console.log(meals);
let i = 0;
let id = 1;
let fillMealList = document.querySelector("#fillMealList");
for (let i = 0; i < meals.length; i++) {
    let item = meals.find(item => item.id === id);
    fillMealList.innerHTML +=
        "<article class='objectP'>"+
        "<h3>" + item.title + "</h3>"+
        "<figure>"+
        "<img src='images/" + item.img + "'" +">" +
        "<figcaption>"+
        "Meal by: " +"<span>" + item.cook + "</span>" +
        "</figcaption>" +
        "</figure>"+
        "<div class='info'>"+
        "<p>€ <span>" + item.price + "</span>" + "/pp" + "</p>" +
        "<a href='javascript:addToCart(" + item.id + ")' class='addToCart'>Order</a>"+
        "</div>"+
        "</article>";
    id++;
}}

Answer 1

据我所知，您有4个错误。

首先，您需要解析从本地存储收到的字符串。

let retrievedObject = JSON.parse(localStorage.getItem('meals'));

第二，console.log(meals);可能会引发错误，因为在该范围内看不到meals。

第三，将餐点放到localStorage的行中的分号错误。它将引发错误。尝试将分号放在行尾。

localStorage.setItem('meals', JSON.stringify(meals));

第四，可能是与第二个问题类似的主要问题。如果meals未定义为数组，则不能使用其原型方法push，它将引发错误。添加const meals = []。

Answer 2

 document.querySelector("#addMeal").addEventListener("click", newMeal);
function newMeal(e){
e.preventDefault();

let title = document.querySelector("#title").value;
let img = document.querySelector("#img").value;
let book = document.querySelector("#book").value;
let calories = document.querySelector("#calories").value;
let servings = document.querySelector("#servings").value;
let type = document.querySelector("#type").value;
let price = document.querySelector("#price").value;
let cook = document.querySelector("#cook").value;
let quantity = document.querySelector("#quantity").value;

let newMeal={
id: 23,
title: title,
img: img,
book: book,
calories: calories,
servings: servings,
type: type,
price: price,
cook: cook,
quantity: quantity};
meals.push(newMeal);
console.log(meals);
localStorage.setItem('meals', JSON.stringify(meals));}

完成此操作后，打开文件，您可能要访问并初始化变量

let a =  localStaorage.getItem('meals)
let b =  JSON.parse(a);
console.log(b);

Answer 3

已经指出了一些错误see working Snippet

在这种情况下，我使用了JQuery和数字输入。

this.Run = function() {
  var meals = [];
  return {

    newMeal: function() {

      var title = document.querySelector("#title").value;
      var img = document.querySelector("#img").value;
      var book = document.querySelector("#book").value;
      var calories = document.querySelector("#calories").value;
      var servings = document.querySelector("#servings").value;
      var type = document.querySelector("#type").value;
      var price = document.querySelector("#price").value;
      var cook = document.querySelector("#cook").value;
      var quantity = document.querySelector("#quantity").value;

      var newMealData = {
        id: 23,
        title: title,
        img: img,
        book: book,
        calories: calories,
        servings: servings,
        type: type,
        price: price,
        cook: cook,
        quantity: quantity
      };


      meals.push(newMealData);

      // Put the object into storage
      localStorage.setItem('meals', JSON.stringify(meals));
    },

    loadMeal: function() {

      var retrievedObject = localStorage.getItem('meals');
      var i = 0;
      var id = 23;
      var fillMealList = $("#fillMealList");
      for (i = 0; i < meals.length; i++) {
        var items = meals.find(item => item.id === id);

        fillMealList.append(
          "<article class='objectP'>" +
          "<h3>" + items.title + "</h3>" +
          "<figure>" +
          "<img src='images/" + items.img + "'" + ">" +
          "<figcaption>" +
          "Meal by: " + "<span>" + items.cook + "</span>" +
          "</figcaption>" +
          "</figure>" +
          "<div class='info'>" +
          "<p>€ <span>" + items.price + "</span>" + "/pp" + "</p>" +
          "<a href='javascript:addToCart(" + items.id + ")' class='addToCart'>Order</a>" +
          "</div>" +
          "</article>");
        id++;
      }

    }

  };
}();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div>
    <label for="title">Title</label>
    <input type="number" id="title">
  </div>

  <div>
    <label for="img">img</label>
    <input type="number" id="img">
  </div>
  <div>
    <label for="book">book</label>
    <input type="number" id="book">
  </div>
  <div>
    <label for="calories">calories</label>
    <input type="number" id="calories">
  </div>
  <div>
    <label for="servings">servings</label>
    <input type="number" id="servings">
  </div>
  <div>
    <label for="type">type</label>
    <input type="number" id="type">
  </div>
  <div>
    <label for="price">price</label>
    <input type="number" id="price">
  </div>
  <div>
    <label for="cook">cook</label>
    <input type="number" id="cook">
  </div>
  <div>
    <label for="quantity">quantity</label>
    <input type="number" id="quantity">
  </div>
</div>
<button id="addMeal" onclick="window.Run.newMeal()">Set Meal</button>
<button id="load" onclick="window.Run.loadMeal()">Load Meal Found</button>
<div id="fillMealList" style="border: 1px solid black; height: 200px; width: 100%;"></div>

JS：在其他页面中加载本地存储

3 个答案: