如何使用JavaScript localStorage来保存用户选择和显示在不同的HTML页面

Question

我有一个学校项目，网址是http://angelaalarconcreative.com/LB_v3/ 我希望能够保存用户的食物选择，以便当你点击自动保存它时将您引导至不同的HTML页面，在此页面中将食物选择及其合并的营养成分汇总在一起。我的老师给了我这个代码作为一个“提示”，但我觉得比以前更茫然地盯着她的代码。任何人都可以帮助我吗？ :)

$(function() { 

$("#save-meal").click(function(){ 


    var authenticated = localStorage.getItem("Greetings"); 
    alert(authenticated); 
    if(authenticated == null) { 
     //alert saying you need to login to use this feature 
     alert("You need to login to use this feature!"); 
    } 
    else { 

     var openDiv = "<div> Welcome " + document.write(localStorage.getItem("Welcome")); 

     var calories = " <div> Calories : " + document.write(localStorage.getItem("calories")); 
     var totalFat = " <div> Total Fat : " + document.write(localStorage.getItem("totalFat")); 
     var cholesterol = " <div> Cholesterol : " + document.write(localStorage.getItem("cholesterol")); 
     var sodium = " <div> Sodium : " + document.write(localStorage.getItem("sodium")); 
     var dietaryFiber = " <div> Dietary Fiber : " + document.write(localStorage.getItem("dietaryFiber")); 
     var sugar = " <div> Sugar : " + document.write(localStorage.getItem("sugar")); 
     var protein = " <div> Protein : " + document.write(localStorage.getItem("protein")); 


     var closeDiv = "</div>" 
    } 

}); 

}）;

我想知道如何使用localStorage获取用户的随机选择并在不同的页面中检索它。考虑到我的项目的交互性，什么是适当的语法？

更新：我根据你的答案改变了一点JS，但它仍然不起作用！我怀疑错误的语法。有人能帮我吗？我感觉我好像接近了！

$(document).ready(function() { 

$("#save-meal").click(function(){ 
    var calories = $('.nf__table #value--calories').text(); 
    var totalfat = $('.nf__table #value--total-fat').text(); 
    var cholesterol = $('.nf__table #value--cholesterol').text(); 
    var sodium = $('.nf__table #value--sodium').text(); 
    var fiber = $('.nf__table #value--dietary-fiber').text(); 
    var sugar = $('.nf__table #value--sugar').text(); 
    var protein = $('.nf__table #value--protein').text(); 

    localStorage.setItem('value--calories', calories); 
    localStorage.setItem('value--total-fat', totalfat); 
    localStorage.setItem('value--cholesterol', cholesterol); 
    localStorage.setItem('value--sodium', sodium); 
    localStorage.setItem('value--fiber', fiber); 
    localStorage.setItem('value--sugar', sugar); 
    localStorage.setItem('value--protein', protein); 
}); 

$("#gotosave").click(function(){ 
    document.write(localStorage.getItem('value--calories')); 
    document.write(localStorage.getItem('value--total-fat')); 
    document.write(localStorage.getItem('value--cholesterol')); 
    document.write(localStorage.getItem('value--sodium')); 
    document.write(localStorage.getItem('value--fiber')); 
    document.write(localStorage.getItem('value--sugar')); 
    document.write(localStorage.getItem('value--protein')); 

}); 

}）;

//document.getElementById("#saved-items").innerHTML = calories;

Answer 1

首先，欢迎来到StackOverflow。

您可以从here了解关于localStorage（或sessionStorage）的更多信息。确定哪一个最适合您的应用程序。

当您的用户将一堆食物拖到“餐盘”时，您的.nf__table（营养成分表）将更新为一组值。此时，当用户单击保存按钮时，您希望保存事件处理程序基本上获取.nf__table中的值并执行localStorage.setItem()以将值存储在本地存储中。

例如，你这是怎么会的卡路里量存储在localStorage的：

var calories = $('.nf__table #value--calories').text(); 
localStorage.setItem('value--calories', calories); 

当用户被引导到下一个页面，文档准备处理程序就可以检索使用getItem()存储的值并使用这些值更新DOM：

localStorage.getItem('value--calories'); 

所以，这个想法是，营养事实值在第一页上的“记忆”，使他们能够在接下来的页面上进行检索。