Javascript JS：在其他页面中加载localstorage_Javascript_Arrays

Javascript JS：在其他页面中加载localstorage

javascript arrays

Javascript JS：在其他页面中加载localstorage,javascript,arrays,Javascript,Arrays,我需要从localstorage加载一个数组我将表单输入添加到localstorage的数组中，如下所示： document.querySelector("#addMeal").addEventListener("click", newMeal); function newMeal(e){ e.preventDefault(); let title = document.querySelector("#title").value; let img = document.querySelect

我需要从localstorage加载一个数组

我将表单输入添加到localstorage的数组中，如下所示：

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++;
}}

document.addEventListener（'DOMContentLoaded'，LoadFinds）；
函数loadFounds（）{
让retrievedObject=localStorage.getItem（'founds'）；
控制台日志（膳食）；
设i=0；
设id=1；
设fillMealList=document.querySelector（“#fillMealList”）；
for（设i=0；i<0.length；i++）{
让item=finds.find（item=>item.id==id）；
fillMealList.innerHTML+=
""+
""+
"";
id++；
}}

正如我所见，您有4个错误

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

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

第二，即

console.log（膳食）

可能会抛出一个错误，因为我无法在该范围内看到

餐食
第三，您将膳食放入本地存储的行有一个错误的分号。它将抛出一个错误。试着在行尾加上分号
localStorage.setItem('meals', JSON.stringify(meals));

第四个问题，也可能是与第二个问题类似的主要问题。如果push
未定义为数组，则不能使用其原型方法push
，它将抛出错误。添加const-feeds=[]
正如我所看到的，您有4个错误
 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 retrievedObject = JSON.parse(localStorage.getItem('meals'));

第二，即console.log（膳食）
可能会抛出一个错误，因为我无法在该范围内看到餐食
第三，您将膳食放入本地存储的行有一个错误的分号。它将抛出一个错误。试着在行尾加上分号
localStorage.setItem('meals', JSON.stringify(meals));

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

 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);

执行此操作后，打开您可能希望访问和初始化变量的文件
let a =  localStaorage.getItem('meals)
let b =  JSON.parse(a);
console.log(b);

已经指出了一些错误
在本例中，我使用了JQuery和数字输入

this.Run=function（）{
风险价值=[]；
返回{
newfeed:function（）{
var title=document.querySelector（“#title”）.value；
var img=document.querySelector（“#img”）.value；
var book=document.querySelector（“#book”）.value；
var carries=document.querySelector（“#carries”）.value；
var servings=document.querySelector（“#servings”）.value；
var type=document.querySelector（“#type”）.value；
var price=document.querySelector（“价格”）.value；
var cook=document.querySelector（“#cook”）.value；
var数量=document.querySelector（“数量”）.value；
var newMealData={
id:23，
标题:标题,，
img:img，
书：书，
卡路里：卡路里，
份数：份数，
类型：类型，
价格：价格，
厨师：厨师，
数量：数量
};
进餐。推送（newMealData）；
//将该对象放入存储器
setItem（'fines'，JSON.stringify（fines））；
},
loadMein:function（）{
var retrievedObject=localStorage.getItem（'founds'）；
var i=0；
var-id=23；
var fillMealList=$（“#fillMealList”）；
对于（i=0；i<0.length；i++）{
var items=finds.find（item=>item.id==id）；
fillMealList.append(
"" +
"" +
"");
id++；
}
}
};
}();

标题
img
书
卡路里
一份
类型
价格
烹调
量
套餐
找到了一顿饭
已经指出了一些错误
在本例中，我使用了JQuery和数字输入

this.Run=function（）{
风险价值=[]；
返回{
newfeed:function（）{
var title=document.querySelector（“#title”）.value；
var img=document.querySelector（“#img”）.value；
var book=document.querySelector（“#book”）.value；
var carries=document.querySelector（“#carries”）.value；
var servings=document.querySelector（“#servings”）.value；
var type=document.querySelector（“#type”）.value；
var price=document.querySelector（“价格”）.value；
var cook=document.querySelector（“#cook”）.value；
var数量=document.querySelector（“数量”）.value；
var newMealData={
id:23，
标题:标题,，
img:img，
书：书，
卡路里：卡路里，
份数：份数，
类型：类型，
价格：价格，
厨师：厨师，
数量：数量
};
进餐。推送（newMealData）；
//将该对象放入存储器
setItem（'fines'，JSON.stringify（fines））；
},
loadMein:function（）{
var retrievedObject=localStorage.getItem（'founds'）；
var i=0；
var-id=23；
var fillMealList=$（“#fillMealList”）；
对于（i=0；i<0.length；i++）{
var items=finds.find（item=>item.id==id）；
fillMealList.append(
"" +
"" +
"");
id++；
}
}
};
}();

标题
img
书
卡路里
一份
类型
价格
烹调
量
套餐
找到了一顿饭
trylet retrievedObject=JSON.parse（localStorage.getItem（'feeds'）
若要将字符串转换回objects数组，在控制台中是否看到与此相关的任何错误？请尝试让retrievedObject=JSON.parse（localStorage.getItem（'feeds'）
将字符串转换回