javascript localStorageを使用してユーザーの選択肢を保存し、別のhtmlページに表示する方法

Question

私は学校プロジェクトを持っていますが、URLは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を使用してユーザーのランダムな選択肢を取得し、別のページで取得する方法を知りたい。私のプロジェクトのインタラクティブ性を考えれば、それに対する正しい構文は何ですか？

更新：私はあなたの答えに応じて少し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へようこそ。

localstorage（またはsessionStorage）については、hereから詳しく知ることができます。どのアプリケーションがあなたのアプリケーションに最も適しているかを判断します。

ユーザーが複数の食品を「ディナープレート」にドラッグすると、.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'); 

ので、アイデアは、彼らが次のページで取得できるように栄養の事実の値は、最初のページに「記憶」されていることです。