Question 183976 in Html Question posted in
Some basic documentation can be found here.

Html – Saving data in the local storage

I wrote a simple To do list code with html and java script. But every time I refresh the code the list are being deleted. I came to know about local storage. But no matter how much I try I cannot implement the concept in my code. Here is my code.

<!DOCTYPE html>
<html lang="en">
<head>
    <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>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>ToDo list</h1>
    <div class="addNewWork">
        <input type="text" placeholder="Enter new work">
        <button>Enter</button>
    </div>
    <ul>

        <li class="random">Notebook</li>
        <li>Jello</li>
        <li>Spinach</li>
        <li>Rice</li>
        <li>Birthday Cake</li>
        <li>Candles</li>
    </ul>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

var button = document.querySelector("button");
var input = document.querySelector("input");
var ul = document.querySelector("ul");

function inputValueCheck() {
    return input.value.length;
};

function addElement() {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input.value));
    ul.appendChild(li)
    input.value = "";
};

function mouseClickEvent() {
    if (inputValueCheck() > 0) {
        addElement();
    };
};

function keypressEvent(event) {
    if (inputValueCheck() > 0 && event.code === "Enter") {
        addElement();
    };
};

button.addEventListener("click", mouseClickEvent);

input.addEventListener("keypress", keypressEvent);

Can someone please demonstrate how to save the data from the input to localstorage and access it as a list tag in my code or just give some hints so that I can solve it myself?

Here is how I tried to do it. I was able to save the data to local storage but I couldn’t able to implement the method localStorage.getItem() in the right way. Here is how I was able to save the data to local storage.

var button = document.querySelector("button");
var input = document.querySelector("input");
var ul = document.querySelector("ul");
var workItems = [];

function inputValueCheck() {
    return input.value.length;
};

function saveDataInLocalStorage() {
    workItems.push(input.value);
    localStorage.setItem("items", JSON.stringify(workItems));
}

function addElement() {
    saveDataInLocalStorage();
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input.value));
    ul.appendChild(li)
    input.value = "";
};

function mouseClickEvent() {
    if (inputValueCheck() > 0) {
        addElement();
    };
};

function keypressEvent(event) {
    if (inputValueCheck() > 0 && event.code === "Enter") {
        addElement();
    };
};

button.addEventListener("click", mouseClickEvent);

input.addEventListener("keypress", keypressEvent);
Tags:

2

Answers


  1. 0

    First seperate the add element function.

    function addElement () {
    saveDataInLocalStorage();
    addElementToDom(input.value);
    input.value = "";
};

function addElementToDom(text) {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(text));
    ul.appendChild(li)
}

    Now you can use the ‘addElementToDom’ function on page load to add the to-do’s saved in localstorage to the page like so.

    const items = JSON.parse(localStorage.getItem("items"));
items.forEach(addElementToDom);
    Login or Signup to reply.
  2. 0 
    let workItems=[];
if(JSON.parse(localStorage.getItem("items") === null ){
  localStorage.setItem("items", JSON.stringify(workItems));
}

function saveDataInLocalStorage() {
    workItems= JSON.parse(localStorage.getItem("items"));
    workItems.push(input.value);
    localStorage.setItem("items", JSON.stringify(workItems));
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search