martinch59609
/
mdt5_webApplicationen
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

NotizenApp funktionsfähig mit Web Storage

master
Christian Martin 3 years ago
parent
e4a4618380
commit
f6702f577b
18 changed files with 96 additions and 545 deletions
Split View Show Diff Stats
  1. 0
    68
      appV0/Eintrag/eintraege.html
  2. 0
    21
      appV0/css/mobile.css
  3. BIN
      appV0/einkaufswagen.jpg
  4. BIN
      appV0/img/faviconNotiz.ico
  5. 0
    67
      appV0/index.html
  6. 0
    48
      appV0/index.js
  7. 0
    12
      appV0/lib/es6-shim.min.js
  8. 0
    4
      appV0/lib/jquery-2.2.4.min.js
  9. 0
    84
      appV0/notizen.js
  10. 0
    77
      appV0/notizenEintrag.html
  11. 15
    14
      appV1/Eintrag/eintraege.html
  12. 3
    9
      appV1/index.html
  13. 0
    46
      appV1/notizen.js
  14. 0
    34
      appV1/notizenAusgabe.js
  15. 20
    0
      appV1/scripts/notizen.js
  16. 58
    0
      appV1/scripts/notizenAusgabe.js
  17. 0
    33
      appV1/test.html
  18. 0
    28
      appV1/test2.html

+ 0
- 68
appV0/Eintrag/eintraege.html View File

@@ -1,68 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Notizen</title>
<link rel="icon" href="img/faviconNotiz.ico">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="/css/mobile.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav">
<li><a class="nav-link active" href="/Eintrag/">Einträge</a></li>
<li><a class="nav-link" href="/">Home</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h1 class="title">Notizeinträge</h1>
<h2>
Eintrag
</h2>
<p>Einträge zu Einkaufsnotizen.</p>

<p>Hier ensteht eine Übersicht.</p>

<img src="/einkaufswagen.jpg" alt="Foto von mir">

<p>Christian :-)</p>
<script src="/lib/es6-shim.min.js"></script>
<script src="/lib/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="/scripts/notizen.js"></script>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-analytics.js"></script>

<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyBGML4iAFtqv-l1Xxcguk9rww82060MqVY",
authDomain: "notizenapp-e3416.firebaseapp.com",
databaseURL: "https://notizenapp-e3416.firebaseio.com",
projectId: "notizenapp-e3416",
storageBucket: "notizenapp-e3416.appspot.com",
messagingSenderId: "794357045429",
appId: "1:794357045429:web:5035e6ba66cb4b534786fc",
measurementId: "G-CRZFWJ08LQ"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
</div>
</body>
</html>

+ 0
- 21
appV0/css/mobile.css View File

@@ -1,21 +0,0 @@

.title {
font-size: 65px;
}

h2 small {
color: rgb(228, 122, 35);
font-size: large;
}

h2 {
background-color: #607d8b;
color: #ffffff;
}

img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}

BIN
appV0/einkaufswagen.jpg View File


BIN
appV0/img/faviconNotiz.ico View File


+ 0
- 67
appV0/index.html View File

@@ -1,67 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Notizen</title>
<link rel="icon" href="img/faviconNotiz.ico">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="css/mobile.css">
</head>
<body>
<div class="container">
<h1 class="title">Notizen</h1>
<h2>
Willkommen!
<small>Meine Notizen mobil verfügbar</small>
</h2>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email Addresse</label>
<input type="email" class="form-control" id="InputEmail1" aria-describedby="emailHelp" placeholder="Email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Passwort</label>
<input type="password" class="form-control" id="InputPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-light" id="btnLogin">Login</button>
<button type="submit" class="btn btn-primary" id="btnSignUp">Sign Up</button>
<button type="submit" class="btn btn-secondary" id="btnLogout">Logout</button>
</form>
<script src="lib/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-firestore.js"></script>

<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyBGML4iAFtqv-l1Xxcguk9rww82060MqVY",
authDomain: "notizenapp-e3416.firebaseapp.com",
databaseURL: "https://notizenapp-e3416.firebaseio.com",
projectId: "notizenapp-e3416",
storageBucket: "notizenapp-e3416.appspot.com",
messagingSenderId: "794357045429",
appId: "1:794357045429:web:5035e6ba66cb4b534786fc",
measurementId: "G-CRZFWJ08LQ"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script src="index.js"></script>
</div>
</body>
</html>

+ 0
- 48
appV0/index.js View File

@@ -1,48 +0,0 @@

//Get elements

const txtEmail = document.getElementById('InputEmail1');
const txtPassword = document.getElementById('InputPassword1');
const btnLogin = document.getElementById('btnLogin');
const btnSignUp = document.getElementById('btnSignUp');
const btnLogout = document.getElementById('btnLogout');

// Add login event
btnLogin.addEventListener('click', e => {
// Get email and pass
const email = txtEmail.value;
const pass = txtPassword.value;
const auth = firebase.auth();
// Sign in
const promise = auth.signInWithEmailAndPassword(email, pass);
promise.catch(e => console.log(e.message));
promise.then(function (user) {
// success
console.log("Email: " + user.email);
window.location.href = "notizenEintrag.html";
})
});

// Add signup event
btnSignUp.addEventListener('click', e => {
// Get email and pass
const email = txtEmail.value;
const pass = txtPassword.value;
const auth = firebase.auth();
// Sign in
const promise = auth.createUserWithEmailAndPassword(email, pass);
promise.catch(e => console.log(e.message));
promise.then(function (user) {
// success
console.log("Email: " + user.email);
window.location.href = "notizenEintrag.html";
})
alert("SignUp gedrückt");

});

btnLogout.addEventListener('click', e => {
firebase.auth().signOut();

});


+ 0
- 12
appV0/lib/es6-shim.min.js
File diff suppressed because it is too large
View File


+ 0
- 4
appV0/lib/jquery-2.2.4.min.js
File diff suppressed because it is too large
View File


+ 0
- 84
appV0/notizen.js View File

@@ -1,84 +0,0 @@
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();
}



+ 0
- 77
appV0/notizenEintrag.html View File

@@ -1,77 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Notizen</title>
<link rel="icon" href="img/faviconNotiz.ico">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="css/mobile.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav">
<li><a class="nav-link active" href="/">Home</a></li>
<li><a class="nav-link" href="/Eintrag/">Einträge</a></li>
</ul>
</div>
</div>
</nav>

<div class="container">
<h1 class="title">Notizen</h1>
<h2>
Willkommen!
<small>Meine Notizen mobil verfügbar</small>
</h2>
<form>
<label for="EinkaufsInput" >Einkaufsnotiz hinzufügen: </label>
<input id="EinkaufsInput" value="" placeholder="Eingabe tätigen" type="text">
<button id="mehrEinkaufen">neuen Eintrag hinzufügen</button>
</form>
<form>
<label for="NotizInput" >Alternative Notiz hinzufügen: </label>
<input id="NotizInput" value="" placeholder="Eingabe tätigen" type="text">
<button id="mehrNotiz">neuen Eintrag hinzufügen</button>
</form>
<script src="notizen.js"></script>

<img src="einkaufswagen.jpg" alt="Foto von mir">

<p>Christian :-)</p>
<script src="lib/es6-shim.min.js"></script>
<script src="lib/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-analytics.js"></script>

<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyBGML4iAFtqv-l1Xxcguk9rww82060MqVY",
authDomain: "notizenapp-e3416.firebaseapp.com",
databaseURL: "https://notizenapp-e3416.firebaseio.com",
projectId: "notizenapp-e3416",
storageBucket: "notizenapp-e3416.appspot.com",
messagingSenderId: "794357045429",
appId: "1:794357045429:web:5035e6ba66cb4b534786fc",
measurementId: "G-CRZFWJ08LQ"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
</div>
</body>
</html>

appV1/eintraege.html → appV1/Eintrag/eintraege.html View File

@@ -4,9 +4,9 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Notizen</title>
<link rel="icon" href="img/faviconNotiz.ico">
<link rel="icon" href="../img/faviconNotiz.ico">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="css/mobile.css">
<link rel="stylesheet" href="../css/mobile.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
@@ -16,8 +16,8 @@
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav">
<li><a class="nav-link active" href="/Eintrag/">Notizen</a></li>
<li><a class="nav-link" href="/">Neue Notiz eintragen</a></li>
<li><a class="nav-link active" href="eintraege.html">Notizen lesen</a></li>
<li><a class="nav-link" href="../index.html">Neue Notiz eintragen</a></li>
</ul>
</div>
</div>
@@ -28,25 +28,26 @@
Übersicht
</h2>

Text: <br>
<textarea id="elem"></textarea> <br>
<p class="font-weight-bold" id="data"></p>

<form>
<div class="form-group">
<label for="NotizInputKey">Notiz nach Thema löschen</label>
<input type="NotizInputKey" class="form-control" id="key" placeholder="Thema">
</div>
<div class="form-group shadow-textarea">
<textarea class="form-control z-depth-1" id="data" rows="3"></textarea>
</div>

<button type="submit" class="btn btn-light" id="delete_key">Notiz nach Thema löschen</button>
<button type="submit" class="btn btn-light" id="delete_all">Alle Notizen löschen</button>
</form>
<button type="submit" class="btn btn-light" id="delete_all">Alle Notizen löschen</button>
</form>
<label for="NotizInputKey">Notiz nach Thema suchen</label>
<input type="NotizInputKey" class="form-control" id="inputKey" placeholder="Thema">
<button type="submit" class="btn btn-light" id="search">Notiz nach Thema suchen</button>
<p class="font-weight-bold" >Gesuchte Notiz:</p>
<p class="font-weight-bold" id="givenKey"></p>
<p class="font-weight-bold" id="notice"></p>


<script src="notizenAusgabe.js"></script>
<script src="../scripts/notizenAusgabe.js"></script>


<script src="lib/es6-shim.min.js"></script>

+ 3
- 9
appV1/index.html View File

@@ -16,8 +16,8 @@
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav">
<li><a class="nav-link active" href="/">Neue Notiz eintragen</a></li>
<li><a class="nav-link" href="/Eintrag/">Notizen</a></li>
<li><a class="nav-link active" href="index.html">Neue Notiz eintragen</a></li>
<li><a class="nav-link" href="Eintrag/eintraege.html">Notizen lesen</a></li>
</ul>
</div>
</div>
@@ -30,9 +30,6 @@
<small>Meine Notizen mobil verfügbar</small>
</h2>

Text: <br>
<textarea id="elem"></textarea> <br>


<form>
<div class="form-group">
@@ -44,12 +41,9 @@
<textarea class="form-control z-depth-1" id="data" rows="3" placeholder="Schreibe etwas..."></textarea>
</div>
<button type="submit" class="btn btn-light" id="Speichern">Neue Notiz speichern</button>
<button type="submit" class="btn btn-primary" id="Lesen" >Notizen lesen</button>
<button type="submit" class="btn btn-light" id="delete_key">Notiz nach Thema löschen</button>
<button type="submit" class="btn btn-light" id="delete_all">Alle Notizen löschen</button>
</form>
<script src="notizen.js"></script>
<script src="scripts/notizen.js"></script>

<img src="einkaufswagen.jpg">


+ 0
- 46
appV1/notizen.js View File

@@ -1,46 +0,0 @@
const btnWeiterleiten = document.getElementById('Lesen');
const btnSpeichern = document.getElementById('Speichern');
const btnLoeschenKey = document.getElementById('delete_key');
const btnAllesLoeschen = document.getElementById('delete_all');



function speichern() {
var key = document.getElementById('key').value;
var data = document.getElementById('data').value;
window.localStorage.setItem(key, data);
alert(data);
}

function weiterleiten() {

window.open('eintraege.html','Lesen');
}

btnSpeichern.addEventListener('click', e => {
speichern()});

btnWeiterleiten.addEventListener('click', e => {
weiterleiten()});


function loeschen() {
var key = document.getElementById('key').value;
window.localStorage.removeItem(key);
alert(key);
}

function allesLoeschen() {
window.localStorage.clear();
}

btnLoeschenKey.onclick
btnLoeschenKey.addEventListener('click', e => {
loeschen()});

btnAllesLoeschen.addEventListener('click', e => {
allesLoeschen()});





+ 0
- 34
appV1/notizenAusgabe.js View File

@@ -1,34 +0,0 @@

const btnLoeschenKey = document.getElementById('delete_key');
const btnAllesLoeschen = document.getElementById('delete_all');

auslesen();


function auslesen() {

var count = window.localStorage.length;
for (let i=0; i<=count; i++) {
var keyname = window.localStorage.key(i);
document.getElementById('elem').value = window.localStorage.getItem("Haus");
}
}


function loeschen() {
var key = document.getElementById('key').value;
window.localStorage.removeItem(key);
}

function allesLoeschen() {
window.localStorage.clear();
}


btnLoeschenKey.addEventListener('click', e => {
loeschen()});

btnAllesLoeschen.addEventListener('click', e => {
allesLoeschen()});


+ 20
- 0
appV1/scripts/notizen.js View File

@@ -0,0 +1,20 @@
const btnSpeichern = document.getElementById('Speichern');
const btnLoeschenKey = document.getElementById('delete_key');
const btnAllesLoeschen = document.getElementById('delete_all');


function speichern() {
var key = document.getElementById('key').value;
var data = document.getElementById('data').value;
window.localStorage.setItem(key, data);
}


btnSpeichern.addEventListener('click', e => {
speichern()});







+ 58
- 0
appV1/scripts/notizenAusgabe.js View File

@@ -0,0 +1,58 @@
const btnSuchen = document.getElementById('search');
const btnLoeschenKey = document.getElementById('delete_key');
const btnAllesLoeschen = document.getElementById('delete_all');


auslesen();


function auslesen() {

var count = window.localStorage.length;
var displayData = document.getElementById('data');
displayData.innerHTML = "";
if (typeof(Storage) !== "undefined") {
for (let i=0; i<count; i++) {
var keyname = window.localStorage.key(i);
var data = window.localStorage.getItem(keyname);
displayData.innerHTML += keyname+": "+data+"<br>";
}
} else {
displayData.innerHTML = "Entschuldigung, Ihr Browser unterstützt nicht Web Storage...";
}
}

function finden() {

var keyname = document.getElementById('inputKey').value;
var givenKey = document.getElementById('givenKey');
var notice = document.getElementById('notice');
givenKey.innerHTML = "";
notice.innerHTML = "";
var data = window.localStorage.getItem(keyname);
givenKey.innerHTML = keyname +":";
notice.innerHTML = data;
}


function loeschen() {
var key = document.getElementById('key').value;
window.localStorage.removeItem(key);
}

function allesLoeschen() {
window.localStorage.clear();
}

btnSuchen.addEventListener('click', e => {
finden()});

btnLoeschenKey.addEventListener('click', e => {
loeschen()});

btnAllesLoeschen.addEventListener('click', e => {
allesLoeschen()});


+ 0
- 33
appV1/test.html View File

@@ -1,33 +0,0 @@
<!DOCTYPE html>
<html>
<head>

<script>
function speichern() {
var key = document.getElementById('key').value;
var data = document.getElementById('data').value;
window.localStorage.setItem(key, data);
}

function lesen() {
var key = document.getElementById('key').value;
document.getElementById('data').value = window.localStorage.getItem(key);
}
</script>

</head>
<body>

Text: <br>
<textarea id="data"></textarea> <br>
Schlüssel: <input type="text" id="key">
<input type="button" id="save" value="Speichern">
<script>
var btnSpeichern = document.getElementById('save');
btnSpeichern.addEventListener('click', e => {
speichern()});
</script>
<input type="button" value="Lesen" onclick="lesen()">

</body>
</html>

+ 0
- 28
appV1/test2.html View File

@@ -1,28 +0,0 @@
<!DOCTYPE html>
<html>
<head>

<script>
function speichern() {
var key = document.getElementById('key').value;
var data = document.getElementById('data').value;
window.localStorage.setItem(key, data);
}

function lesen() {
var key = document.getElementById('key').value;
document.getElementById('data').value = window.localStorage.getItem(key);
}
</script>

</head>
<body>

Text: <br>
<textarea id="data"></textarea> <br>
Schlüssel: <input type="text" id="key">
<input type="button" value="Speichern" onclick="speichern()">
<input type="button" value="Lesen" onclick="lesen()">

</body>
</html>

Write Preview
Loading…
Cancel
Save