Unterschiedliche Listenansicht -> JS localStorage

Hallo zämä

Ich könnte etwas Unterstützung bei JavaScript brauchen, da ich da nicht wirklich fit darin bin.

Im Shop, möchte ich zwei unterschiedliche Listen-Ansichten anbieten.
Habe dazu zwei Links mit den Icons gesetzt:

HTML-Code:

---

<div id="contentswitcher">
        <a id="ansicht_hori" onclick="add()">{{image::06cabf3a-1446-11eb-9f68-001c429f067c}}</a>
        <a id="ansicht_vert" onclick="remove()">{{image::06d7ebe1-1446-11eb-9f68-001c429f067c}}</a>
</div>

---

Damit ich jeweils nur das korrekte Icon angezeigt bekommen, wird per JS bei Klick eine Klasse hinzugefügt/entfernt:

Code:

---

function add() {
          document.getElementById("ansicht_hori").className = "noactive";
          document.getElementById("ansicht_vert").className = "active";
          document.getElementById("list").className = "product_list_vertical";
      } 
      function remove() {
          document.getElementById("ansicht_hori").className = "active";
          document.getElementById("ansicht_vert").className = "noactive";
          document.getElementById("list").className = "product_list";
      }

---

Frage 1: Kann man dieses JS gebündelter schreiben oder ist das okay?

Soweit funktioniert das ziemlich gut. Jetzt besteht mein Problem darin, das wenn die Seite neu geladen wird, zum Beispiel wenn man ein Produkt dem Warenkorb hinzufügt oder wenn man auf eine andere Produkteseite geht, werden die Klassen wieder zurückgesetzt. Nun war meine Idee, dass mittels "localStorage" zu lösen.

Das ist mein Versuch, welcher aber leider nicht greift:

Code:

---

      function saveContent(){
                var listenansicht =$('#ansicht_hori', '#ansicht_vert', '#product_list').html();
                localStorage['#ansicht_hori', '#ansicht_vert', '#product_list']=listenansicht;
        }
        function restoreContent(){
                var mylistenansicht = localStorage['listenansicht'];
                if (mylistenansicht != undefined) {
                $('#ansicht_hori', '#ansicht_vert', '#product_list').html(mylistenansicht);
        }

---

Ich verstehe zwar wie "localStorage" funktioniert, weiss aber nicht wirklich wie man das anwendet.
Kann man darüber auch Klassen speichern oder gilt das nur für Inhalt?

Würde mir wer von euch JS Helden hier bitte etwas unter die Arme greifen?

https://developer.mozilla.org/en-US/...torage#Example

hmmm... schnalle es irgendwie nicht:

Zum speichern der Daten:

Code:

---

localStorage.setItem('ansicht_hori','ansicht_vert','list');

---

Kann man das so schreiben? :rolleyes:

Zum ausgeben, dann etwa so?

Code:

---

const cat = localStorage.getItem('ansicht_hori','ansicht_vert','list');

---

Nein, das ist falsch, siehe die Definition von setItem und getItem.

Ok, ich glaube langsam zu begreifen :D
Was ich noch nicht verstehe: Wie weiss ich, welchen keyValue (das wäre ja nun die entsprechende Klasse) der User momentan aktiv hat?

Ich verstehe leider deinen Code und dein Vorhaben nicht, daher kann ich dir das nicht beantworten ;)

Im Shop werden die Produkte als Kacheln dargestellt.
Nun möchte ich die Möglichkeit bieten, das man per Klick auf ein Icon, die Produkte anstatt in der Kachelansicht als Listenansicht erhält.

Das sind die zwei Icons:

HTML-Code:

---

<div id="contentswitcher">
        <a id="ansicht_hori" onclick="add()">{{image::06cabf3a-1446-11eb-9f68-001c429f067c}}</a>
        <a id="ansicht_vert" onclick="remove()">{{image::06d7ebe1-1446-11eb-9f68-001c429f067c}}</a>
</div>

---

Nun ändere ich per Klick auf ein Icon, die entsprechende Klasse damit ich dies dann als Listenansicht stylen kann.

Code:

---

      function add() {
          document.getElementById("ansicht_hori").className = "noactive";
          document.getElementById("ansicht_vert").className = "active";
          document.getElementById("list").className = "product_list_vertical";
      } 
      function remove() {
          document.getElementById("ansicht_hori").className = "active";
          document.getElementById("ansicht_vert").className = "noactive";
          document.getElementById("list").className = "product_list";
      }

---

Hat ein User also auf die Listenansicht umgestellt, sollte dies gespeichert werden, ansonsten kriegt er beim Wechsel auf eine andere Produkteseite oder beim hinzufügen in den Warenkorb wieder die Kachelansicht.

Nun müsste ich ja wissen, welche Ansicht der User eingestellt hat damit die entsprechende Klasse gespeichert werden kann.

Da ich sicher nicht der Erste bin der so etwas umsetzen möchte, würde mich interessieren, wie ihr das umgesetzt habt?
Ist mein gewählter Weg eventuell nicht geeignet?

Zudem: Können Klassen per localStorage überhaupt gespeichert werden oder ist dies eher nur für Werte?

Eine CSS Klasse ist ja nur ein String. Den kannst du auf jeden Fall in localStorage speichern.

Super, dann sollte das ja gehen. Wie genau ich das nun bewerkstellige weiss ich noch nicht so genau :D

Also den Wert in localStorage schreiben:

Code:

---

function populateStorage() {
  localStorage.setItem('ansicht_hori');
  localStorage.setItem('ansicht_hori');
  localStorage.setItem('list');
}

---

Dann zum Ausgeben würde es etwa so aussehen:

Code:

---

function setStyles() {
  var ansichtHori = localStorage.getItem('ansicht_hori');
  var ansichtVert = localStorage.getItem('ansicht_vert');
  var list = localStorage.getItem('list');

  document.getElementById('ansicht_hori').value = ansichtHori;
  document.getElementById('ansichtVert').value = ansichtVert;
  document.getElementById('list').value = list;

---

Beim speichern fehlt mir ja nun der keyValue. Wie kriege ich den aktuell gesetzten Wert da rein?

Die Klassen werden nun wie folgt gespeichert:

Code:

---

function populateStorage() {
  localStorage.setItem('ansicht_hori', document.getElementById("ansicht_hori").className);
  localStorage.setItem('ansicht_vert', document.getElementById("ansicht_vert").className);
  localStorage.setItem('list', document.getElementById("list").className);
}

---

Nun hänge ich aber an der Ausgabe fest. Wie genau kriege ich das nun wieder ausgelesen?

Code:

---

function setStyles() {
  var ansichtHori = localStorage.getItem('ansicht_hori');
  var ansichtVert = localStorage.getItem('ansicht_vert');
  var list = localStorage.getItem('list');

  document.getElementById('ansicht_hori').value = ansichtHori;
  document.getElementById('ansichtVert').value = ansichtVert;
  document.getElementById('list').value = list;
}

---

Irgendwie funktioniert das nicht :rolleyes: und ich habe keine Idee warum.

Hier der Code um die Daten zu speichern:

Code:

---

function saveInLocalStorage() {
if(hasLocalStorage()) {
  window.localStorage.setItem('ansicht_hori', document.getElementById("ansicht_hori").className);
  window.localStorage.setItem('ansicht_vert', document.getElementById("ansicht_vert").className);
  window.localStorage.setItem('list', document.getElementById("list").className);
}

---

Gleichzeitig muss dies ja auch wieder ausgegeben werden:

Code:

---

function getLocalStorage() {
  if(hasLocalStorage()) {
    if (window.localStorage.getItem("ansicht_hori") !== null) {
      document.getElementById('ansicht_hori').className = window.localStorage.getItem('ansicht_hori');
    }
    if (window.localStorage.getItem("ansicht_vert") !== null) {
      document.getElementById('ansicht_vert').className = window.localStorage.getItem('ansicht_vert');
    }
    if (window.localStorage.getItem("list") !== null) {
      document.getElementById('list').className = window.localStorage.getItem('list');
    }
  }
}

---

Habe keinen Plan, ob ich damit auf dem richtigen Weg bin. Einige Tipps und Anregungen würden sicher weiterhelfen.