Web-Speicher

(Bezeichnung aus dem FireFox mit F12 aufrufen. Diese Funktion heisst zum Beispiel in Opera oder Chrome "App" danach im Menu "Speicher")
Index:

Das hat eigentlich nichts mit JavaScripts zu tun, ausser man will Informationen sessionsübergreifend zwischenspeichern (da empfehle ich aber eher das leichter zu nutzende ) oder zur Übergabe von Werte an PHP nutzen.
Wenn du den Webspeicher bei Cookies offen hast, kannst du sehen, wie es sich ein verhält.
Ein Script (siehe im Seitenuelltext nach) frägt genau nach diesem Cookie und switcht den Status Aktiv/Gelöscht.

Blöd nur, wenn mehrere Cookies gesetzt werden, dann klappt das nicht mehr so leicht (siehe auch die "lüge" im Cookiestatus...damit es wieder funktioniert, müssen alle Cookies gelöscht werden). Somit müssen die Cookies mit einer Funktion auseinander gehalten werden

PHP

Da Cookies mit dem HTTP-Request versendet werden, können sie mit PHP mit der globalen Variable "$_COOKIE" abgerufen werden und sind somit in PHP ein auswertbarer Array.

<?php
   var_dump($_COOKIE);
?>
Ausgabe: array(0) {
}

JS

In JS werden die Cookies mit "document.cookie" abgerufen, sind aber ein einziger String, der getrennt werden muss
schau nach wie das in der Konsole aussieht (console.log(document.cookie);). Sonst:

<script>
   document.write(document.cookie);
</script>
Ausgabe:

im Internet hat es tausende Routinen Cookies zu entschlüsseln. Ich bevorzuge meine Art, indem ich die Cookies in ein 2 dimensinalen Array ablege.

<script>	
    let a_guetzli = []; // Guetzli Array als global gültige Variable
    function guetzli_erkennen()  // erkennt Cookies und legt sie im Array a_guetzli[Pos][0/1] ab: a_guetzli[Pos][0] Cookiename, a_guetzli[Pos][1] Wert
    {    
        g = document.cookie.split(';');
        for(i=0;i<g.length;i++) 
        {
            elemente = g[i].split('=');
            a_guetzli[i] = [];
            a_guetzli[i][0] = elemente[0];
            a_guetzli[i][1] = elemente[1];
       }
   }	  
</script>

Lokaler Speicher

Wie Cookies ist Local-Storage eine lokale (Browser)Ablage um Informationen zwischenzulagern. Eigentlich sogar etwas besser, denn die Information pro Schlüssel kann bis zu 5 MB (Cookies nur 4 KB) betragen, wird nicht mit dem HTTP-Request verschickt und ist mit JavaScripts besser ansprechbar.

Auslesen eines Schlüssels localStorage.getItem(Schlüssel). Beispiel:

<script>
   document.write(localStorage.getItem("Besuchsdatum"));
</script>
Ausgabe:

Setzen eines Schlüssels localStorage.setItem(Schlüssel,Wert). Beispiel:

<script>
   datum = new Date();
   localStorage.setItem("Besuchsdatum", datum.toString());
</script>

Informationen Man kann die Anzahl der Einträge (length) ermitteln, und auch die Schlüssel (key(item)) an der bestimmten Position.
Beispiel:

<script>
   for(i=0;i<localStorage.length;i++)
   {
      document.write(localStorage.key(i));
   }
</script>
Ausgabe:

Löschen Man kann entweder einzelne Einträge gezielt löschen (removeItem(key)), oder auch den gesamten Inhalt vom lokalen Speicher (clear).
Beispiel:

<script>
   localStorage.removeItem("Besuchsdatum"));
   localStorage.clear
</script>

Prüfe die Wirkung im Entwicklertool durch Direkteingabe in der Console:

Sessions Speicher

Der Session-Storage ist das gleiche wie Local-Storage, bloss dass der Inhalt bei Sessionsende gelöscht wird

<script>
   sessionStorage.setItem("Sessioneintrag", "Verschwindet wieder");
</script>

Da alle Anweisungen für "sessionStorage.Anweisung" die gleichen wie in "localStorage.Anweisung" sind, verzichte ich hier auf weitere Beschreibungen.

Cache-Speicher

Ich bin da total überfordert. Dass das Cache als Zwischenspeicher für Internetdateien dient, damit sie nicht immer wieder neu geladen werden müssen, ist klar und dass der Browser dies selber handelt, erlaubt mir mich nicht damit zu kümmern.
Wozu dieser Cache-Speicher also dient ist mir unklar, auch wie er angesprochen wird ist mir zu hoch.
Seiten, die etwas weiterhelfen könnten: mozilla.org Developer - Slingacademy Cachestorage in JS
Obwohl der folgende Code zu funktionieren scheint, kann ich ihn nicht lesen und finde auch keinen Hinweis wo die Daten gespeichert wurden, aber wenn die angegebenen Dateien existieren, werden ihre Namen im Web-Speicher/Cache-Speicher, sogar mit Status und Pfad, aufgelistet.

<script>
   caches.open('Test-Cache').then(function(cache){
   return cache.addAll([
   "console2.css","web-speicher.php"
   ]);
   });
</script>

Indexed-DB

Echt kompliziert. Es werden Funktionen in Funktionen aufgerufen, die aber erst nachdem die Hauptfunktion beendet ist, ausgeführt werden.
Ich verstehe das nicht.

.... Seite mit allen zu einer DB nötige Aktivitäten.
Ich hab's geschrieben, aber ich kann nicht alles nachvollziehen.

Fazit: es ist einfacher den zu benutzen