Difference between revisions of "JavaScript 2 Datenspeicherung"
Jump to navigation
Jump to search
(Created page with "==Datenspeicherung in JavaScript== *JS läuft aus Sicherheitsgründen in einer Sandbox = Programme können nur auf Ressourcen zurückgreifen können die ihnen der Browser expl...") |
|||
(69 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
==Datenspeicherung in JavaScript== | ===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 | *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 | *Dateisystem kann nicht verwendet werden | ||
Line 8: | Line 9: | ||
**Mangel an Sicherheit -> Daten können ohne große Probleme ausgewertet werden | **Mangel an Sicherheit -> Daten können ohne große Probleme ausgewertet werden | ||
**(keine sensible Daten darin abspeichern!!) | **(keine sensible Daten darin abspeichern!!) | ||
====Möglichkeiten der Datenspeicherung über JS==== | |||
{| class="wikitable" | |||
|- | |||
! | |||
! 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<br /> | |||
| 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 | |||
*<code>username="Coders Bay"</code> | |||
*Ohne Pfad setzt der Browser das Cookie immer für die aktuelle Seite | |||
*Anwendungsfall: Login, Warenkorb | |||
====Cookies erstellen==== | |||
<pre> | |||
document.cookie = "username=Coders Bay"; "greeting=hello" | |||
</pre> | |||
'''mit Ablaufdatum: (expiry date)''' | |||
*'''expires''' Attribut setzt das Ablaufdatum | |||
*'''GMT''' - gibt die Zeitzone an | |||
<pre> | |||
document.cookie = "username=Coders Bay; expires=Thu, 18 Dec 2013 12:00:00 GMT" | |||
</pre> | |||
====Funktion für Cookie Erstellung mit Ablaufdatum==== | |||
<pre> | |||
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); | |||
</pre> | |||
====Cookies abfragen==== | |||
<pre> | |||
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")); | |||
</pre> | |||
====Cookies löschen==== | |||
Das Löschen von Cookies ist sehr einfach, man muss nur das Ablaufdatum auf einen Tag in der Vergangenheit setzen | |||
<pre> | |||
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC"; | |||
</pre> | |||
====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 | |||
<pre> | |||
//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); | |||
} | |||
} | |||
</pre> | |||
===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==== | |||
<pre> | |||
localStorage.setItem("key", "value"); | |||
</pre> | |||
====Auf die gespeicherten Daten zugreifen==== | |||
<pre> | |||
localStorage.getItem("key"); | |||
</pre> | |||
=====Löschen der Daten===== | |||
<pre> | |||
localStorage.removeItem("key"); | |||
</pre> | |||
====Beispiel localStorage==== | |||
<pre> | |||
//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(); | |||
} | |||
</pre> | |||
===Session Storage=== | |||
*Key-Value Speicher | |||
*Existiert nur im aktuellen Browserfenster/ Browsertab | |||
*Einfache Anwendung | |||
*'''Anwendungsfall:''' Sprachauswahl speichern | |||
====Setzen eine Key-Value-Pairs==== | |||
<pre> | |||
sessionStorage.setItem("key", "value"); | |||
</pre> | |||
====Auf gespeicherte Daten zugreifen==== | |||
<pre> | |||
sessionStorage.getItem("key"); | |||
</pre> | |||
====Löschen der Daten==== | |||
<pre> | |||
sessionStorage.removeItem("key"); | |||
</pre> | |||
===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==== | |||
<pre> | |||
// 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]); | |||
} | |||
} | |||
</pre> | |||
<blockquote> | |||
Quellen: JavaScript | |||
Programmieren für Einsteiger | |||
ISBN: 978-3-96645-016-4 <br> | |||
https://www.w3schools.com/js/js_cookies.asp<br> | |||
https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie | |||
</blockquote> |
Latest revision as of 12:12, 7 July 2022
Datenspeicherung in JavaScript[edit]
- 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[edit]
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 🍪[edit]
- 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[edit]
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[edit]
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[edit]
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[edit]
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[edit]
- 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[edit]
- Key-Value Speicher der die Werte als String speichert
- Einfache Anwendung
- Anwendungsfall: Userbezogene Daten speichern
Setzen eines Key-Value-Pairs[edit]
localStorage.setItem("key", "value");
Auf die gespeicherten Daten zugreifen[edit]
localStorage.getItem("key");
Löschen der Daten[edit]
localStorage.removeItem("key");
Beispiel localStorage[edit]
//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[edit]
- Key-Value Speicher
- Existiert nur im aktuellen Browserfenster/ Browsertab
- Einfache Anwendung
- Anwendungsfall: Sprachauswahl speichern
Setzen eine Key-Value-Pairs[edit]
sessionStorage.setItem("key", "value");
Auf gespeicherte Daten zugreifen[edit]
sessionStorage.getItem("key");
Löschen der Daten[edit]
sessionStorage.removeItem("key");
Indexed DB[edit]
- 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[edit]
// 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