diedVIPs

html knowhow

Vorübergehende Datenspeicherung










Vorübergehende Datenspeicherung

Mit diesem Script können Sie kurzfristig Name und Wohnort speicher, anzeigen und wieder löschen.
So sieht´s aus











Quellcode
<html>

<head>
<style type="text/css">Hier nichts</style>
</head>

<body >
<div id="formDiv">
<center><table style="width: 50%" cellpadding="4" cellspacing="0">
<tr><td class="auto-style35"><form id="carForm">
<div class="auto-style34">
<label for="carBrand" >Name</label><br/>
<label for="carPrice" >Wohnort</label><br/>
<label for="key" ><strong>Passwort </strong>(Bitte merken)</label><br/><br/>
<button style="float:right" type="submit">Speichern</button><br/><br/>
</div>
</td>
<td colspan="2" valign="top" class="auto-style35"> <input type="text" id="carBrand" placeholder="Name" required><br>
<input type="text" id="carPrice" placeholder="Wohnort" required><br>
<input type="text" id="key" placeholder="Passwort" required><br></form>
</td>
</tr>
<tr>
<td class="auto-style33"><label for="retrieveKey" >Passwort eingeben zum zeigen</label>
<br>
<br>
<button style="float:right" id="retrieveButton">Zeigen</button><br></td>
<center>
<td colspan="2" valign="top" class="auto-style35"><input type="text" id="retrieveKey" placeholder="Passwort" required></td>
</tr>
<tr>
<td colspan="3" class="auto-style36"><div id="retrieve"></div></td>
</tr>
<tr>
<td class="auto-style33"><label for="removeKey" >Passwort eingeben zum Löschen</label>
<br>
<br>
<button style="float:right" id="removeButton">Löschen</button><br/>
<br>
<button style="float:right" id="clearButton">Alles löschen</button></td>
<center>
<td colspan="2" valign="top" class="auto-style35"><input type="text" id="removeKey" placeholder="Passwort" required></td>
</tr>
</table>
</div><br/><br/>
</center>

<script>
function store(){ //stores items in the localStorage
var brand = document.getElementById('carBrand').value;
var price = document.getElementById('carPrice').value;
var key = document.getElementById('key').value;
const car = {
Name: brand,
Wohnort: price,
}
window.localStorage.setItem(key,JSON.stringify(car));
//converting object to string
}
function retrieveRecords(){ //retrieves items in the localStorage
var key = document.getElementById('retrieveKey').value; //gets key from user
console.log("retrive records");
var records = window.localStorage.getItem(key); //searches for the key in localStorage
var paragraph = document.createElement("p");
var infor = document.createTextNode(records);
paragraph.appendChild(infor);
var element = document.getElementById("retrieve");
element.appendChild(paragraph);
}
function removeItem(){ //deletes item from localStorage
var key = document.getElementById('removeKey').value; //gets key from user
localStorage.removeItem(key) //passes key to the removeItem method
console.log("remove items");
}
function clearStorage(){ //clears the entire localStorage
localStorage.clear()
console.log("clear records");
}
window.onload =function(){ //ensures the page is loaded before functions are executed.
document.getElementById("carForm").onsubmit = store
document.getElementById("clearButton").onclick = clearStorage
document.getElementById("removeButton").onclick = removeItem
document.getElementById("retrieveButton").onclick = retrieveRecords
}
</script>
</body>

</html>







Kontakt    Datenschutz   Impressum