JavaScript 2 Datenspeicherung

Datenspeicherung in JavaScript

• Stark eingeschränkte Möglichkeiten für Datenspeicherung
• JS läuft aus Sicherheitsgründen in einer Sandbox = Programme können nur auf Ressourcen zurückgreifen können die ihnen der Browser explizit zur Verfügung stellt
• Dateisystem kann nicht verwendet werden
• Clientseitig – Daten werden nicht zum Server geschickt
• Probleme der vorhandenen Möglichkeiten
  • Datenmenge begrenzt
  • Nur string-Werte verarbeiten (Lösung: mit JSON arbeiten)
  • Mangel an Sicherheit -> Daten können ohne große Probleme ausgewertet werden
  • (keine sensible Daten darin abspeichern!!)

Möglichkeiten der Datenspeicherung über JS

	Cookies	Session Storage	Local Storage	IndexedDB
Nutzlast	max. 4KB	5 bis 10MB	5 bis 10MB	dynamisch, hängt vom Betriebsystem & Browser ab
max. Lebenszeit	praktisch unbegrenzt	bis Seite geschlossen wird	praktisch unbegrenzt	praktisch unbegrenzt
Geltungsbereich	Alle Browserfenster/ Tabs	ein individuelles Brwoserfenster / Tab	Alle Browserfenster / Tabs	Alle Browserfenster / Tabs
Löschung	Haltbarkeitsdatum wird bei der Erzeugung des Cookies festgelegt	Wird beim Schließen des Browserfensters automatisch gelöscht	Wird nur von Javascript oder Löschen des Browser-Cache gelöscht	Wird nur von Javascript oder Löschen des Browser-Cache gelöscht

Cookies 🍪

• Hinweis: keine Cookies von lokalen Seiten
• Erstellung von Cookies durch: document.cookie"
• document.cookie gibt alle Cookies in einem String zurück.
  • Zum Beispiel: cookie1=value; cookie2=value; cookie3=value;
• Werden als Key-Value Pairs abgespeichert, und durch ein ; Semikolon getrennt
• username="Coders Bay"
• Ohne Pfad setzt der Browser das Cookie immer für die aktuelle Seite
• Anwendungsfall: Login, Warenkorb

Cookies erstellen

document.cookie = "username=Coders Bay"; "greeting=hello"

mit Ablaufdatum: (expiry date)

• expires Attribut setzt das Ablaufdatum
• GMT - gibt die Zeitzone an

document.cookie = "username=Coders Bay; expires=Thu, 18 Dec 2013 12:00:00 GMT"

Funktion für Cookie Erstellung mit Ablaufdatum

function setCookie(cookieKey, cookieContent, daysToExpire){
    let date = new Date();

    //hier wird das gewünschte Ablaufdatum für den Cookie gesetzt
    //mit setDate wird die Dauer des Cookies dem heutigen Datum aufaddiert (+100 Tage in unserem Beispiel)

    date.setDate(daysToExpire);

    //Ablaufdatum wird mit dem "expires" Keyword zusammengefügt
    //Hier wird der gesamte Cookiestring zusammengebaut
    document.cookie = `${cookieKey}=${cookieContent};expires=${date}`;
}

setCookie("username", "Coders Bay", 100);

Cookies abfragen

function getCookie(cookieKey) {
    cookieKey += '=';
    let decodedCookie = decodeURIComponent(document.cookie);

    //Die Methode decodeURIComponent()dient dazu ev. vorhandene Umlaute oder Sonderzeichen richtig darzustellen
    //document.cookie enthält den gesamten Cookie String in einer Zeichenkette (alle Cookies, die gespeichert wurden
    //sind hier enthalten)

    let cookieArray = decodedCookie.split(';');
    //die .split() Methode zerteilt den Cookie String am Semikolon und speichert die einzelnen Cookie Paare in
    // unser cookieArray

    for (let i = 0; i < cookieArray.length; i++){
        let currentCookie = cookieArray[i];
        //In der while-Schleife werden Leerzeichen entfernt, die am Anfang des Array-Feldes vorhanden sind
        while (currentCookie.charAt(0) === " "){
            currentCookie= currentCookie.substring(1);
        }
        if(currentCookie.indexOf(cookieKey) === 0) {
            //Wird der gesuchte Cookie gefunden, wird er mit der substring() Methode herausgelöst
            //Es wird nur der gespeicherte Wert des Cookies zurückgegeben, nicht der Key*/
            return currentCookie.substring(cookieKey.length);
        }
    }
    //wird der Cookie nicht gefunden:
    return "";
}

console.log(getCookie("username"));

Cookies löschen

Das Löschen von Cookies ist sehr einfach, man muss nur das Ablaufdatum auf einen Tag in der Vergangenheit setzen

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC";

Gesamtbeispiel

• Der User gibt seinen Namen beim Laden der Seite ein z.B. MAX
• Der Name wird 180 Tage gespeichert
• Innerhalb dieser 180 Tage wird der User mit „Hallo MAX“ begrüßt

//HTML
<body onload="checkCookie()">
<button onclick="setCookie('username', '', -1)">Delete Cookie</button>

//JavaScript
function setCookie(cookieKey, cookieContent, daysToExpire = 180){
    let date = new Date();
    //hier wird das gewünschte Ablaufdatum für den Cookie gesetzt
    //mit setDate wird die Dauer des Cookies dem heutigen Datum aufaddiert (+100 Tage)
    date.setDate(daysToExpire);
    //Ablaufdatum wird mit dem "expires" Keyword zusammengefügt
    //Hier wird der gesamte Cookiestring zusammengebaut
    document.cookie = `${cookieKey}=${cookieContent};expires=${date}`;
}

function getCookie(cookieKey) {
    cookieKey += '=';
    let decodedCookie = decodeURIComponent(document.cookie);
    //document.cookie enthält den gesamten Cookie String in einer Zeichenkette (alle Cookies, die gespeichert wurden
    //sind hier enthalten
    let cookieArray = decodedCookie.split(';');
    //die .split() Methode zerteilt den Cookie String am Semikolon und speichert die einzelnen Cookie Paare in
    // unser cookieArray
    for (let i = 0; i < cookieArray.length; i++){
        let currentCookie = cookieArray[i];
        //In der while-Schleife werden Leerzeichen entfernt, die am Anfang des Array-Feldes vorhanden sind
        while (currentCookie.charAt(0) === " "){
            currentCookie= currentCookie.substring(1);
        }
        if(currentCookie.indexOf(cookieKey) === 0) {
            /* Wenn ja, gewünschten Inhalt mit substring() Methode extrahieren
            * Es wird nur der gespeicherte Wert des Cookies zurückgegeben, nicht der Key*/
            return currentCookie.substring(cookieKey.length);
        }
    }
    return "";
}
//überprüft ob der Username schon als Cookie existiert, wenn ja wird der Benutzer mit seinem Namen begrüßt,
//wenn nicht wird der Cookie erstellt

function checkCookie() {
    let user = getCookie("username");
    if (user !== "" && user != null){
        alert(`Hallo ${user}!`);
    } else {
        user = prompt("Tell us your name :)");
        setCookie("username", user, 180);
    }
}

Daten mit Local Storage speichern

• Key-Value Speicher der die Werte als String speichert
• Einfache Anwendung
• Anwendungsfall: Userbezogene Daten speichern

Setzen eines Key-Value-Pairs

localStorage.setItem("key", "value");

Auf die gespeicherten Daten zugreifen

localStorage.getItem("key");

Löschen der Daten

localStorage.removeItem("key");

Beispiel localStorage

//HTML

<body>
  <p>Bezeichnung: <input id="key" value=""></p>
  <p>Inhalt: <input id="string-value" value=""></p>
  <button type="button" onclick="saveToLocalStorage()">Eingabe</button>
  <button type="button" onclick="getFromLocalStorage()">Werte ausgeben</button>
  <button type="button" onclick="deleteFromLocalStorage()">Werte im localStorage löschen</button>
  <p id="p-result"></p>
</body>

//JavaScript

const paragraphResult = document.querySelector("#p-result");
const keyInput = document.querySelector("#key");
const valueInput = document.querySelector("#string-value");

function saveToLocalStorage() {
      let key = keyInput.value;
      const valueInput = document.querySelector("#string-value");
      const paragraphResult = document.querySelector("#p-result");

      // Wert wird im localStorage gespeichert
      localStorage.setItem(key, valueInput.value);
    }

function getFromLocalStorage() {
  let result = "";
  let i = 0;
  for (let val in localStorage) {
     // mit getItem() wird der Wert aus 
     // dem localStorage abgerufen

     result += val + ": " + localStorage.getItem(val);
     result += "<br>";
     i++;

     // Um weitere Attribute und Methoden des Objektes nicht
     // auszugeben = zusätzlicher Zähler der die Länge des
     // Eintrages überprüft

        if(i == localStorage.length) {
          break;
        }
      }
      paragraphResult.innerHTML = result;
    }

function deleteFromLocalStorage() {
  // Werte werden gelöscht
  localStorage.clear();
}
    

Session Storage

• Key-Value Speicher
• Existiert nur im aktuellen Browserfenster/ Browsertab
• Einfache Anwendung
• Anwendungsfall: Sprachauswahl speichern

Setzen eine Key-Value-Pairs

sessionStorage.setItem("key", "value");

Auf gespeicherte Daten zugreifen

sessionStorage.getItem("key");

Löschen der Daten

sessionStorage.removeItem("key");

Indexed DB

• Kann Objekte und Key-Value-Pairs speichern
• Asynchron (im Gegensatz zu Session und Local Storage)
• Durch ein Event getriggert
• SQL Statements möglich
• Anwendung: kann große Menge von Objekten speichern - WebApps (zB Google Maps, Gmail)

Beispiel

// Kundendaten
const customerData = [
  { cnumber: "17844", lastname: "Maier", firstname: "Laura", email: "laura@maier.at" },
  { cnumber: "17845", lastname: "Huber", firstname: "Franz", email: "franz@huber.at" }
];

// gespeicherte Daten holen
const customerDB = "Customer DB";

// Datenbank Öffnen, 2 Parameter ist die Version der DB
let request = indexedDB.open(customerDB, 1);

request.onerror = function(event) {
   // Error behandeln
}
request.onupgradeneeded = function(event) {
   // Datenbank holen
   let db = event.target.result;

   //ObjectStore erstellen wo die Daten gespeichert werden, cnumber ist der primary-key
   let objectStore = db.createObjectstore("Customers", {keyPath: "cnumber" });

   // Werte speichern
   for(let i in customerData) {
      objectStore.add(customerData[i]);
   }
}

Quellen: JavaScript Programmieren für Einsteiger ISBN: 978-3-96645-016-4
https://www.w3schools.com/js/js_cookies.asp
https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie