Wer kennt es nicht, man füllt sorgfältig ein Formular aus und irgendetwas geht schief und alle Eingaben sind verloren. Je größer und umfangreicher das Formular ist, desto mehr ärgert man sich. Mit ein wenig Glück hat der Browser vielleicht die Eingaben gespeichert, aber das ist leider nicht immer so. Passiert das ein zweites oder sogar drittes Mal ist die Motivation dahin.
Damit zukünftige Anwender bei deinen Projekten nicht auch solch eine Nutzererfahrung machen müssen, stelle ich heute eine einfache Lösung vor. Natürlich können Eingaben auch sofort in eine Datenbank übertragen werden, allerdings ist nicht bei jedem Projekt eine Datenbank nötig oder sinnvoll. Daher dreht sich in dieser Anleitung alles um das Thema “Local Storage”.
Wie der Name “Local Storage” schon sagt, werden die Daten lokal im Browser des Nutzers gespeichert. Damit ist es nicht nur möglich im Falle eines Fehlers Daten wiederherzustellen, sondern der Anwender kann auch eine Pause einlegen und später wieder weiter machen.
In dieser Anleitung arbeiten wir mit Mozillas Firefox Browser. Das Speichern der Daten funktioniert aber auch in jedem anderen modernen Browser.
Mit Firefox kann man sich einfach anzeigen lassen, was sich im “Local Storage” befindet, dafür ruft man unter “Weitere Werkzeuge” -> “Werkzeuge für Web-Entwickler” auf. Unter dem Reiter “Web-Speicher” findet man den Punkt “Local Storage”.
01. Daten speichern
Die Funktion wird bei jeder Eingabe aktiviert und speichert die Daten in ein JSON, das aus der ID und dem eingegebenen Wert besteht. Die ID wird benötigt, um später wieder zuordnen zu können, in welches Input-Feld der jeweilige Wert geschrieben werden muss. Dank “:input” wird jedes Input-Feld berücksichtigt, eine genaue Definition, welche Eingabefelder gespeichert werden sollen, ist auch möglich. Mit “.each” gehen wir alle Felder ab und speichern via “.push” die Daten in unser JSON.
$(':input').on('input', function() {
var formname = "demo-form";
var formData = [];
localStorage.removeItem(formname);
$('form input, form select').not('input[type="hidden"]').each(function(){
formData.push({ id: this.id, value: this.value});
});
localStorage.setItem(formname, JSON.stringify(formData));
});02. Daten wiederherstellen
Der Nutzer hat den Tab versehentlich geschlossen und kehrt jetzt wieder zurück. Wie von Zauberhand sind alle Daten noch da. Das schaffen wir, indem als Erstes geprüft wird, ob es Daten im lokalen Speicher gibt. Heißt die Antwort “true” dann laden wir mit einer “for” -Schleife alle Daten aus dem JSON.
$(document).ready(function() {
var formname = "demo-form";
if(localStorage.getItem(formname) != undefined){
formData = JSON.parse(localStorage.getItem(formname) );
for (var i = 0; i < formData.length; i++) {
$('[id='+formData[i].id+']').val(formData[i].value);
}
}
});03. Demo-Projekt
Zur besseren Veranschaulichung habe ich ein kleines Demo-Projekt mit Bootstrap geschrieben. Damit einfach sichtbar ist, was sich im “Local Storage” befindet, habe ich einen Code-Tag mit eingebaut, der das JSON anzeigt. Besser ist es allerdings, die oben beschriebene Funktion des Browsers zu nutzen, um sich die Daten anzuschauen.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>LocalStorage</title>
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">
<header>
<div class="collapse bg-dark" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-7 py-4">
<h4 class="text-white">Über</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-white">Menü</h4>
<ul class="list-unstyled">
<li><a href="#" class="text-white">Link1</a></li>
<li><a href="#" class="text-white">Link2</a></li>
<li><a href="#" class="text-white">Link3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar navbar-dark bg-dark shadow-sm">
<div class="container">
<a href="/" class="navbar-brand d-flex align-items-center">
<strong class="ms-2">LocalStorage</strong>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</header>
<div class="pt-5 pb-2 text-center container">
<div class="row pt-3 pb-2">
<div class="col-lg-6 col-md-8 mx-auto">
<h1 class="fw-light">LocalStorage</h1>
<h2 class="lead text-muted">Daten im LocalStorage ablegen</h2>
<div class="row py-2 d-flex justify-content-center">
</div>
</div>
</div>
</div>
<div class="pt-2 pb-2 bg-light">
<div class="container">
<div class="row d-flex justify-content-center">
<div class="col-lg-5 col-md-10 text-center">
<form id="demo-form">
<div class="card">
<div class="card-body">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="input-1" placeholder="Input 1">
<label for="input-1">Input 1</label>
</div>
<div class="form-floating mb-3">
<input type="text" class="form-control" id="input-2" placeholder="Input 2">
<label for="input-2">Input 2</label>
</div>
<div class="form-floating mb-3">
<input type="text" class="form-control" id="input-3" placeholder="Input 3">
<label for="input-3">Input 3</label>
</div>
</div>
</div>
</form>
<div class="card mt-4 bg-dark">
<code class="output p-2">LocalStorage Reader</code>
</div>
<button type="button" id="clean-form" class="btn btn-primary mt-4">Löschen</button>
</div>
</div>
</div>
</div>
<footer class="text-muted text-center container py-5">
<b>jQuery 3.6.0 | Bootstrap 5.2</b>
<div class="text-muted mt-3"><a href="https://theartsblog.de">ArtsBlog</a></div>
</footer>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
var formname = "demo-form";
// Read localStorage
$(document).ready(function() {
if(localStorage.getItem(formname) != undefined){
formData = JSON.parse(localStorage.getItem(formname) );
for (var i = 0; i < formData.length; i++) {
$('[id='+formData[i].id+']').val(formData[i].value);
}
// Only for demo
$('.output').html(localStorage.getItem(formname));
}
});
// Save in localStorage
$(':input').on('input', function() {
var formData = [];
localStorage.removeItem(formname);
$('form input, form select').not('input[type="hidden"]').each(function(){
formData.push({ id: this.id, value: this.value});
});
localStorage.setItem(formname, JSON.stringify(formData));
// Only for demo
$('.output').html(localStorage.getItem(formname));
});
// Clean localStorage
$("#clean-form").on('click', function() {
$("#demo-form")[0].reset();
localStorage.removeItem(formname);
location.reload(true);
});04. Download
Ich habe alle Files dieser Anleitung zusammengestellt, damit das Einrichten nochmal etwas schneller von der Hand geht. Ich hoffe, ihr habt genauso viel Spaß mit dem Projekt wie ich und jetzt wünsche ich euch gutes Gelingen.
