Beispiel:JS-WebStorage.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0;" />
<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
<style>
form {
width: 15em;
float: right;
}
button, label, input {
width: 90%;
padding: 0.2em;
margin: 0.2em;
}
input {
width: 86%;
margin-bottom: 2em;
}
ul#eintraege {
width: 50%;
border: 1px solid #a9a9a9;
border-radius: 5px;
margin-top: 10px;
padding: 0px;
list-style-type: none;
}
ul#eintraege li {
border-bottom: 1px solid #a9a9a9;
padding: 10px;
background-image: linear-gradient(#f9f9f9, #e3e3e3);
}
ul#eintraege li:last-child {
border-bottom: none;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
ul#eintraege li:first-child {
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
</style>
<script>
window.onload = init;
function init() {
var button = document.getElementById('mehr');
button.onclick = ToDoHinzufügen;
var clearButton = document.getElementById('loeschen');
clearButton.onclick = allesLöschen;
var eintraegeArray = HolEinträge();
for (var i = 0; i < eintraegeArray.length; i++) {
var aufgabeNr = eintraegeArray[i];
var value = JSON.parse(localStorage[aufgabeNr]);
insDOMschreiben(aufgabeNr, value);
}
}
function HolEinträge() {
var eintraegeArray = localStorage.getItem('eintraegeArray');
if (!eintraegeArray) {
eintraegeArray = [];
localStorage.setItem('eintraegeArray', JSON.stringify(eintraegeArray));
} else {
eintraegeArray = JSON.parse(eintraegeArray);
}
return eintraegeArray;
}
function ToDoHinzufügen() {
var eintraegeArray = HolEinträge();
var value = document.getElementById('eingabe').value;
if(value!='')
{
var currentDate = new Date();
var aufgabeNr = 'aufgabe_' + currentDate.getTime()
var aufgabeText = {'value': value};
localStorage.setItem(aufgabeNr, JSON.stringify(aufgabeText));
eintraegeArray.push(aufgabeNr);
localStorage.setItem('eintraegeArray', JSON.stringify(eintraegeArray));
insDOMschreiben(aufgabeNr, aufgabeText);
document.getElementById('eingabe').value=' ';
}
else
{
alert('Bitte geben Sie etwas ein!');
}
}
function toDoLöschen(e) {
var aufgabeNr = e.target.id;
var eintraegeArray = HolEinträge();
if (eintraegeArray) {
for (var i = 0; i < eintraegeArray.length; i++) {
if (aufgabeNr == eintraegeArray[i]) {
eintraegeArray.splice(i,1);
}
}
localStorage.removeItem(aufgabeNr);
localStorage.setItem('eintraegeArray', JSON.stringify(eintraegeArray));
ausDOMentfernen(aufgabeNr);
}
}
function insDOMschreiben(aufgabeNr, ItemObj) {
var eintraege = document.getElementById('eintraege');
var eintrag = document.createElement('li');
eintrag.setAttribute('id', aufgabeNr);
eintrag.innerHTML = ItemObj.value;
eintraege.appendChild(eintrag);
eintrag.onclick = toDoLöschen;
}
function ausDOMentfernen(aufgabeNr) {
var eintrag = document.getElementById(aufgabeNr);
eintrag.parentNode.removeChild(eintrag);
}
function allesLöschen() {
localStorage.clear();
var ItemList = document.getElementById('eintraege');
var eintraege = ItemList.childNodes;
for (var i = eintraege.length-1; i >= 0; i--) {
ItemList.removeChild(eintraege[i]);
}
var eintraegeArray = HolEinträge();
}
</script>
<title>Beispiel: localStorage</title>
</head>
<body>
<h1>HTML5 localStorage</h1>
<main>
<h2>ToDo-Liste</h2>
<form>
<label for="eingabe">neues Projekt hinzufügen: </label><input id="eingabe" value="" type="text">
<button id="mehr">neuen Eintrag hinzufügen</button>
<button id="loeschen">alle Einträge löschen </button>
</form>
<p>Klicken Sie auf die Einträge, um sie zu entfernen.</p>
<ul id="eintraege">
</ul>
</main>
</body>
</html>
