Wieso funktioniert mein localStorage nicht?

//addListFunction
function addList() {
    var txt = input.value;
    if(txt == ''){
        alert('Bitte etwas eingeben!');
    }else{


        const myli = document.createElement('li'); //create <li> node! 
        myli.innerHTML = txt;
        list.insertBefore(myli,list.childNodes[0]);
        input.value = '';
        localStorage.setItem('listenElement', txt); 
        localStorage.getItem(localStorage.key(txt));
        
        //createSpan
        const mySpan = document.createElement('span');
        mySpan.innerHTML = 'x';
        myli.appendChild(mySpan);
        
        //delButtons
        const close = document.querySelectorAll('span');
        for(let i = 0; i < close.length; i++) {
            close[i].addEventListener('click', (e) => {
                close[i].parentElement.remove();
            })
            input.value = '';
        }
     }

Ich arbeite zum ersten mal mit Localstorage..und verstehe nicht wieso meine Listeneinträge nicht abgespeichert werden...
Abgespeichert werden diese nur aber wenn ich die Seite neu Lade verschwinden diese gleich wieder.

3 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

programmieren, JavaScript, Informatik

05.01.2022, 19:23

Dein Skript überschreibt den Eintrag immer wieder. Das heißt, du speicherst maximal einen Wert.
Da du nichts Weiteres geteilt hast, würde ich einmal hinterfragen, ob du überhaupt eine Logik implementiert hast, die beim Laden der Seite gespeicherte Einträge aus dem Storage laden und in die Liste einfügen würde.
Deine Seite solltest du über eine Domain aufrufen (falls du das nicht bereits tust). Das heißt, du benötigst auch einen Webserver, der die Seite für dich ausspielt.
Diese Zeile ist redundant und generell wohl nicht sonderlich sinnvoll:

localStorage.getItem(localStorage.key(txt));

Den Rückgabewert verwertest du doch nirgendwo. Außerdem setzt der Aufruf voraus, dass txt in jedem Fall einem gültigen Index entspricht. Wenn du also immer nur einen Schlüssel speicherst (listenelement), gibt es immer nur einen Eintrag im Storage und auch nur einen gültigen Index: 0.

MagisterSamael

05.01.2022, 20:29

Zu 4.:

Nicht unbedingt.

Es gab und gibt Bugs in Browsern, die die Daten nur abspeicherten, wenn sie einmalig geladen wurden.

Frag mich nicht wieso, hat mich bei einem Projekt Tage gekostet herauszufinden.

regex9

05.01.2022, 20:40

@MagisterSamael

Gibt es dazu einen Bugreport?

MagisterSamael

05.01.2022, 20:46

@regex9

Habe nie etwas offizielles gefunden (oder gar gesucht, wenn ich ehrlich bin), nur Nutzer mit Ähnlichen Problemen und Lösungen auf Stackoverflow.

dahjonny

Beitragsersteller

05.01.2022, 20:27

Ah okay Danke für die Hilfe!
Habe ein wenig weiterrecherchiert. Abspeichern kann ich es jetzt...nur sieht es noch nicht so schön aus.
Bei der 2. von dir:
Das hat mir geholfen! Also implementiere ich noch eine UpdateList()-Funktion um die gespeicherten Einträge zu laden.

MagisterSamael

05.01.2022, 18:36

Ave!

Abgespeichert werden diese nur aber wenn ich die Seite neu Lade verschwinden diese gleich wieder.

Startest du die Seite Lokal oder über eine Domain?

LocalStorage ist Domaingebunden.

In manchen Fällen kann das zu Problemen führen, wenn man die Seite Testweise lokal öffnet.

dahjonny

Beitragsersteller

05.01.2022, 20:28

Danke für den Tipp!

Mathelatte

05.01.2022, 18:13

JavaScript kann ja auch nicht so einfach Daten auf der Festplatte speichern. Das muss man auf dem Server speichern (PHP) oder vielleicht als Cookie und dann laden, wenn die Seite geöffnet wird.

MagisterSamael

05.01.2022, 18:37

Wenn man keine Ahnung hat, sollte man lieber gar nichts schreiben...

Ähnliche Beiträge

javascript hilfe dringendd?

Hallo zusammen!

Ich habe angefangen eine ToDoListe zu machen und bin schon fast fertig. Allerdings muss ich noch zwei Buttons fertigen und ich weiss nicht wie. Das erste Button ist "Delete All", dieser sollte alle Aufgaben (Aufgaben der ToDoListe) löschen. Das zweite ist "Change Status", dieser sollte, sofort alle Aufgaben wegstreichen oder zeigen dass diese Aufgaben gemacht worden sind. Ich hoffe auf eure Hilfen!

Bin schon richtig müde, und muss die Aufgaben schon bis morgen abschicken..

Dankeschön im Voraus!

const todoInput = document.querySelector(".todo-input");
const todoInputTwo = document.querySelector(".todo-input-two")
const todoButton = document.querySelector(".todo-button");
const todoList = document.querySelector(".todo-list");
const filterOption = document.querySelector(".filter-todo");
const deleteAllTodos = document.querySelector(".deleteAll button")


document.addEventListener("DOMContentLoaded", getLocalTodos);
todoButton.addEventListener("click", addTodo);
todoList.addEventListener("click", deleteCheck);
filterOption.addEventListener("change", filterTodo);


function addTodo(event) {
    event.preventDefault();
    const todoDiv = document.createElement("div");
    todoDiv.classList.add("todo");
    const newTodo = document.createElement("li");
    newTodo.innerText = `${todoInput.value}, Date: ${todoInputTwo.value}`; 
    newTodo.classList.add("todo-item");
    todoDiv.appendChild(newTodo);
+
    saveLocalTodos(todoInput.value);
    
    const completedButton = document.createElement("button");
    completedButton.innerHTML = '<i class="fas fa-check-circle"></li>';
    completedButton.classList.add("complete-btn");
    todoDiv.appendChild(completedButton);


    const trashButton = document.createElement("button");
    trashButton.innerHTML = '<i class="fas fa-trash"></li>';
    trashButton.classList.add("trash-btn");
    todoDiv.appendChild(trashButton);
    
    todoList.appendChild(todoDiv);
    todoInput.value = "";
}


function deleteCheck(e) {
    const item = e.target;


    if(item.classList[0] === "trash-btn") {
        const todo = item.parentElement;
        todo.classList.add("slide");


        removeLocalTodos(todo);
        todo.addEventListener("transitionend", function() {
            todo.remove();
        });
    }


    if(item.classList[0] === "complete-btn") {
        const todo = item.parentElement;
        todo.classList.toggle("completed");
    }
}


function filterTodo(e) {
    const todos = todoList.childNodes;
    todos.forEach(function(todo) {
        switch(e.target.value) {
            case "all": 
                todo.style.display = "flex";
                break;
            case "completed": 
                if(todo.classList.contains("completed")) {
                    todo.style.display = "flex";
                } else {
                    todo.style.display = "none";
                }
                break;
            case "incomplete":
                if(!todo.classList.contains("completed")) {
                    todo.style.display = "flex";
                } else {
                    todo.style.display = "none";
                }
                break;
        }
    });
}


function saveLocalTodos(todo) {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }
    todos.push(todo);
    localStorage.setItem("todos", JSON.stringify(todos));
}


function getLocalTodos() {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }
    todos.forEach(function(todo) {
        const todoDiv = document.createElement("div");
        todoDiv.classList.add("todo");
        const newTodo = document.createElement("li");
        newTodo.innerText = todo;
        newTodo.classList.add("todo-item");
        todoDiv.appendChild(newTodo);


        const completedButton = document.createElement("button");
        completedButton.innerHTML = '<i class="fas fa-check-circle"></li>';
        completedButton.classList.add("complete-btn");
        todoDiv.appendChild(completedButton);


        const trashButton = document.createElement("button");
        trashButton.innerHTML = '<i class="fas fa-trash"></li>';
        trashButton.classList.add("trash-btn");
        todoDiv.appendChild(trashButton);


        todoList.appendChild(todoDiv);
    });
}


function removeLocalTodos(todo) {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }



  deleteAllTodos.addEventListener("click", removeAllTodos);



    const todoIndex = todo.children[0].innerText;
    todos.splice(todos.indexOf(todoIndex), 1);
    localStorage.setItem("todos", JSON.stringify(todos));
}

...zum Beitrag

Werte aus Datenbank anzeigen mit JS?

Hallo,

ich habe folgenden Code für mein Formular:

<form action="/message1" method="post">
  <div class="input">
    <input type="text" placeholder="Chat" id="input" name="input1">
  </div>
  <div class="send">
    <button type="submit" onclick="message();">Send</button>
  </div>
</form>

Nun noch das JS onclick-Event:

function message() {
  input = document.getElementById("input").value;
  count++;

  if (input == "") {
    alert("please type your message!");
  }
  else {
    if (count % 2 == 0) {
      let newDiv = document.createElement("div");
      newDiv.id = "divMessage";
      newDiv.style.display = "flex";
      newDiv.style.justifyContent = "flex-start";
      newDiv.style.margin = "45px";
      newDiv.style.backgroundColor = "#303032";
      newDiv.style.borderRadius = "10px";
      newDiv.style.padding = "10px";
      newDiv.style.marginTop = "80px";
      newDiv.style.color = "white";
      newDiv.style.marginBottom = "80px";
      newDiv.style.width = "120px";
      newDiv.innerHTML = input;

      let chatMessages = document.querySelector(".chat-messages");
      chatMessages.appendChild(newDiv);
    }

Und nun noch das Reinschreiben mit node.js in die MariaDB-Datenbank:

app.post('/message1', async (req, res) => {
  const input = req.body.input1;
  console.log(input);
  const conn = await pool.getConnection();
  await conn.query(`INSERT INTO test.handy (id, name) VALUES (2, '${input}')`);
  conn.release();
});

Nun möchte ich aber, das, was in die Datenbank geschrieben wurde, beim Aktualisieren der Seite immer noch im "newDiv" anzeigen. Wie geht das?

...zum Beitrag

Minecraft bot erstellen?

Hallo ich spiele Minecaft auf einem CB Server, dort können sich Spieler gegenseitig Geld bezahlen und Nachrichten scheiben. Jetzt wollte ich ein bot scheiben der dies automatisch mach also wie ein Casino bot wen man ihm Geld bezahlt bezahlt er entweder was zurück (mit gewinn) oder nicht je nach dem ob man gewinnt oder nicht. aber es sollte ausschliesslich fixe Beiträge haben z.b 1000dollar gegeben entweder gewinnt man 2000dollar oder nix. Kann mir da jemand helfen wie ich den programmieren kann

...zum Beitrag

Fachinformatiker?

Also, ich habe ein Praktikum bei einem Systemadmin und ein Praktikum bei einem Software Developer absolviert.

Ich kann mich nicht ganz entscheiden. Beides ist geil.

Wäre es schlauer eine Ausbildung als Fachinformatiker für Systemintegration zu absolvieren, weil um Systemadmin zu werden, wäre es schon gut eine Ausbildung zu machen und falls ich irgendwann sage, jo ich will Software Entwickler sein, kann ich ja immernoch als halber Quereinsteiger rein (ich kann Programmieren).

...zum Beitrag

Was sind Beispiele für Funktionen und Beispiele für Prozeduren?

Aus Informatischer Sicht

...zum Beitrag

CSS / JavaScript: Hilfe bei Leaflet-Integration?

Hallo Leute,

ich brauche Hilfe bei dieser Arbeit.

1. Es sollen zwei Karten nebeneinander sein. Jedoch soll die rechte Karte eine Here-Map sein. Wie baue ich das in den Code ein (siehe unten)?

Sie müssen http://ivansanchez.gitlab.io/Leaflet.TileLayer.HERE/leaflet-tilelayer-here.js in einem <script>-Tag laden. Danach müsste es mit sowas hier gehen:

L.tileLayer.here({
  appId: 'ViVS62MmsdTJSzwXMlHb',
  appCode: 'bsODmSCzkVqEMR8TnGPHdw'
}).addTo(map);

Statt addTo(map) kommt natürlich der Name Ihrer rechten Karte hin.

appId und appCode sind hier aus dem Beispiel von Ivan Sanchez http://ivansanchez.gitlab.io/Leaflet.TileLayer.HERE/demo.html

________________

2. Außerdem soll die zweite Karte sozusagen synchron/parallel mit der linken Karte verlaufen:

Sie müssen, wenn der Benutzer in der linken Karte zoomt oder sie verschiebt, die rechte Karte aktualisieren. Dazu müssen Sie eine Funktion schreiben, die aufgerufen wird, wenn auf der linken Karte das "zoomend" oder "moveend"-Ereignis auftritt.

Also etwa

map1.on("zoomend", meine_funktion);

und dann in der meine_funktion können Sie auf der rechten Karte "setBounds" aufrufen, um die rechte Karte zu verschieben/zu zoomen. Das "setBounds" muss dabei den aktuellen Ausschnitt der linken Karte übergeben bekommen (getBounds).

_________________________________________________

<html>
  <head>
    <link rel="stylesheet" href="https: //unpkg.com/leaflet@1.4.0/dist/leaflet.css"></link>
    <script src="https: //unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
    <script src="http: //unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
    <script>
      function initMaps() {
        map = new L.map('meine_map');
        L.tileLayer('https: //{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
        let karlsruhe = new L.LatLng(49, 8.4);
        map.setView(karlsruhe, 12);
        map1 = new L.map('meine_map1');
        L.tileLayer('http: //{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png').addTo(map1);
        map1.setView(karlsruhe, 12);

        document.getElementById("suchen").addEventListener("click", suchen);
      }

      async function suchen() {
        let url = new URL('https: //nominatim.openstreetmap.org/search');
        url.searchParams.append('format', 'json');
        url.searchParams.append('q', document.getElementById("ort").value);

        let response = await fetch(url);
        let json = await response.json();
        let box = json[0].boundingbox;

        map.fitBounds([ [ box[0],box[2] ], [ box[1],box[3] ] ]);
        map1.fitBounds([ [ box[0],box[2] ], [ box[1],box[3] ] ]);
      }
    </script>
  </head>
  <body onLoad="initMaps()">
    <div id="meine_map" style="height: 360px; width: 360px;"></div>
    <div id="meine_map1" style="position: absolute; top: 9px; left: 375px; height: 360px; width: 360px;"></div>
    <input type="text" id="ort">
    <button id="suchen">Suchen</button>
  </body>

Anmerkung: Damit der GF-Editor die URLs nicht verfälscht, wurde im Protokoll stets ein Leerzeichen hinzugefügt.

Ich danke euch für die Hilfe im Voraus!

...zum Beitrag

JavaScript Übungsaufgaben

Kennt jemand ein Buch das Übungsaufgaben für JavaScript beinhaltet? Habe mir nun 2 Bücher gekauft die zwar die Syntax erläutern, aber keine Übungsaufgaben mit sich bringen. Es wäre echt toll wenn man das gelernte gleich mal testen koennte. Denn für richtige Anwendungen auf einer Webseite reicht es noch nicht aus .^^

...zum Beitrag

JavaScript backend programmieren?

Ich möchte so eine Umfrage Website programmieren bei der man zum Beispiel sieht 5 Leute stimmen für Ja und 3 für Nein.

Also wenn man abstimmt sollte das ergebnis auf einer Datenbank oder so gespeichert werden sodass es alle sehen und nicht nur man selber.

bisher hab ich nur solche frontend seiten gemacht wie Tictactoe oder sowas einfaches.

Was muss ich dafür können? PHP? Node.js ? MySQL ?

Jeder Youtuber erzählt was anderes.

...zum Beitrag

Return JavaScript?

Was heisst das und hat jemand ein gutes Beispiel ?

https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/return

diese Website sagt mir nichts

...zum Beitrag

Hilfe bei Variablen, Schleifen und If-Abfrage in JavaScript?

Nächste Woche habe ich einen Test über JavaScript, wo ich bestimmen muss, worüber der code sich handelt. Weil das der Anfang für mich ist kommen nur Beispiele zur Variablen, do-while Schleifen und If-Abfrage vor. Bei Variablen weiß ich nur, dass "var", "const" und "tel" existieren, wobei var nicht mehr aktuell ist.

Wozu sind die gut? Und wie erkenne ich, ob bei dem code ein fehler ist?

Danke voraus!

...zum Beitrag

Modellierung Lampe | Java?

Hallo,

wir müssen in Informatik eine Lampe modellieren. Dazu haben wir eine LampeGui und eine Lampe. LampeGui hat sozusagen eine Lampe. Ich erstelle nun ein Klassendiagramm für die LampeGui, später das für Lampe - die private Sachen habe ich schon, nur fehhlen mir noch die Methoden für LampeGui. Soll man in einem UML-Editor, wenn man eine Methode definiert hat, auch noch reinschreiben, was in der Methode drinnen steht? Weil wenn nicht, dann könnte ich doch einfach nur eine Klasse machen und sagen: Ja, da steht ja alles drinnen. Oder?

...zum Beitrag

JavaScript / jQuery - Warum funktioniert das nicht?

Hallo,

ich möchte hier Absatz 2-5 eine Klasse ('abschnitt') geben und deren Text ändern zu 'neuer jQuery Text'.

Wieso funktioniert das hier nicht?

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    'use strict';

    document.onload = function() {
      for (var i = 1; i < document.querySelectorAll('p').length; i++) {
        document.querySelectorAll('p')[i].classList.add('abschnitt');
        $('.abschnitt').text('neuer jQuerytext');
      }
    }
  </script>
  <script></script>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <br>
  <h1> Überschrift </h1>
  <h2 id="ü2"> Überschrift h2 </h2>
  <p id="p1"> Absatz 1 </p>
  <p id="p2"> Absatz 2</p>
  <p> Absatz 2</p>
  <p> Absatz 3</p>
  <p> Absatz 4</p>
  <p> Absatz 5</p>
</body>
</html>

...zum Beitrag

Gute Webseiten oder PDF Docs, um PHP, Javascript, CSS und HTML zu lernen?

Video Tutorials beanspruchen viel Zeit. Deshalb bräuchte ich Webseiten oder PDF Docs für die oben genannten Programmier- und Skriptsprachen. Wichtig wäre, dass sie marktorientiert sind, also genau die Dinge zeigen, die man im realen IT Markt anwendet.

...zum Beitrag

Welche Programmiersprachen sollte man für Websites kennen?

Ich weiß, dass HTML eine Auszeichnungssprache ist, deswegen ja auch "Markup Language"😇

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen