localStorage
Hallo zusammen,
ich wurde darauf hingewiesen das ZIP-Dateien (aus verständlichen Gründen) ungern geladen und angeschaut werden, daher ein weiterer Versuch mit einem kleineren Code-Ausschnitt
Ich muss für ein Projekt eine Art "Mensplan" erstellen.
Aktuell hänge ich jedoch an dem Thema localStorage. Habe mir dazu schon ettliche Tutorials angesehen, bekomme es aber nicht wirklich so zum Laufen wie es soll...
Ich möchte einen Mechanismus implementieren, der ein favorisieren der Speisen ermöglich. Ein Grundgerüst habe ich mir schon gebaut (ein Teil ist auch vorgegeben). Der Name der Speise soll im localStorage gespeichert werden. Sollte sich das Gericht auf der Karte wiederfinden, soll es dementsprechend markiert werden.
Vielleicht könnt ihr mir da helfen wie man das ganze angeht und umsetzen könnte.
Hier das vorgegebene HTML-Grundgerüst:
HTML:
<header>
Mensaplan<span class="button"><i class="fa fa-refresh"></i></span>
</header>
<content>
<div id="week">
<ul day="mo">
<span class="title">Montag</span>
</ul>
<ul day="di">
<span class="title">Dienstag</span>
</ul>
<ul day="mi">
<span class="title">Mittwoch</span>
</ul>
<ul day="do">
<span class="title">Donnerstag</span>
</ul>
<ul day="fr">
<span class="title">Freitag</span>
</ul>
</div>
</content>
Hier die Mensaplan.js (teilweiße vorgegeben. Hier soll ich die Funktionalität einbauen)
Code:
function onFavStatusChanged(itemName) {
console.log(itemName);
}
function update() {
model.update(view.update);
}
function init() {
document.querySelector("header .button").addEventListener("click", update);
model.restore(view.update);
view.setFavCallback(onFavStatusChanged);
}
return {
init: init
};
In diesem Codeschnippsel einer JS-Datei wird der Mensaplan "aufgebaut". Es soll gespeichert werden ob eine Mahlzeit als Favorit Class "fa-circle"(siehe Bild unten) gespeichert wurde oder nicht. Sonst Class "fa-circle-thin"
Code:
var favCallback;
function setFavCallback(callback) {
favCallback = callback;
}
function onFavIconClicked(event) {
event.target.classList.toggle("fa-circle");
event.target.classList.toggle("fa-circle-thin");
favCallback(event.target.parentElement.firstElementChild.innerHTML);
}
function addEntriesForDay(day, entries) {
var dayContainer = document.querySelector("#week ul[day=" + day + "]");
entries.forEach(function (entry) {
var dayElement = document.createElement("li"),
nameElement = document.createElement("span"),
favElement = document.createElement("i");
nameElement.classList.add("name");
nameElement.innerHTML = entry.name;
favElement.classList.add("fa");
favElement.classList.add("fa-circle-thin");
favElement.addEventListener("click", onFavIconClicked);
dayElement.classList.add(entry.category);
dayElement.appendChild(nameElement);
dayElement.appendChild(favElement);
dayContainer.appendChild(dayElement);
});
}
function clearEntries() {
var currentEntries = document.querySelectorAll("#week li");
for (var i = 0; i < currentEntries.length; ++i) {
currentEntries[i].remove();
}
}
function update(menuData) {
clearEntries();
for (var key in menuData) {
if (typeof menuData[key] !== "function") {
addEntriesForDay(key, menuData[key]);
}
}
}
return {
update: update,
setFavCallback: setFavCallback
};
So sieht das ganze aktuell aus... doch er speichert es mir noch nicht im localStorage
Stehe echt total auf dem Schlauch
Besten Dank schon mal im Voraus!
