Beispiel:JS-WebStorage.html

<!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: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 gib 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>

HTML localStorage

 <main>

ToDo-Liste

<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>

Klicke auf die Einträge, um sie zu entfernen.

 </main>

</body> </html>