Local Storage Example

Load localstorage in other page

by Olayinka Otuniyi

HTML

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

JavaScript

this.Run = function() {
	//"use strict";
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++;
			}

		}

	};
}();