Question

我有一个学校项目，网址为http://angelaalarconcreative.com/LB_v3/ 我希望能够保存用户的食物选择，这样当您点击SAVE时，它会自动将您引导到另一个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来获取用户的随机选择并在不同的页面中检索它。鉴于我项目的交互性，该方法的正确语法是什么？

更新：根据你的回答，我已经改变了一点点但是它仍然无法工作！我怀疑语法错误。有人能帮我吗？我觉得我已经接近它了!!!!

$(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（营养成分表）会更新一堆值。此时，当您的用户单击“保存”按钮时，您希望Save事件处理程序基本上获取.nf__table中的值并执行localStorage.setItem()以将值存储在本地存储中。

例如，您可以在localStorage中存储卡路里量：

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

当用户被定向到下一页时，您的文档就绪处理程序可以使用getItem()检索存储的值，并使用这些值更新DOM：

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

因此，我们的想法是在第一页上“记住”营养事实值，以便在下一页检索它们。

如何使用javascript localStorage保存用户选择并在不同的html页面中显示

1 个答案: