How To Make It So That Data Doesn't Get Lost When Refreshed In Javascript?

I am making a to do list, and to do items are being lost (as expected) when page is refreshed. How do I stop it from clearing the items when the page is refreshed??????? Html:

Solution 1:

You can't get your tasks if you refreshed the page without storing them somewhere,

so I recommend you to use local storage as a starting for you

the whole idea here is when you press enter to submit a task you need to make an array to push each task and at the same time update your local storage with that array

and then you need to make an event listener ('DOMContentLoaded') so if you refresh your page then you retrieve tasks from local storage and append them to dom

I hope this answer clarify your issue

// select elementsconst input = document.getElementById('userInput');
const ul = document.querySelector('ul');

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

    // update array with storagelet arr = getTasks();
    // push li text to array
    arr.push(li.textContent);
    // update localStoragelocalStorage.setItem('tasks', JSON.stringify(arr));

    functioncrossOut() {
        li.classList.toggle("done");
    }
    li.addEventListener("click", crossOut);

    var dBtn = document.createElement("button");
    dBtn.appendChild(document.createTextNode("X"));
    li.appendChild(dBtn);
    dBtn.addEventListener("click", deleteListItem);

    functiondeleteListItem() {
        li.classList.add("delete");
    }
}

//enter worksfunctionaddListAfterKeypress(event) {
    if (input.value.length > 0 && event.which === 13) {
        createListElement();
        // wipe out input
        input.value = '';
    }
}

input.addEventListener("keypress", addListAfterKeypress);

// check localStoragefunctiongetTasks() {
    let tasks;
    if (localStorage.getItem('tasks') === null) {
        tasks = [];
    } else {
        tasks = JSON.parse(localStorage.getItem('tasks'));
    }
    return tasks;
}

// on dom loading append taskswindow.addEventListener('DOMContentLoaded', () => {
    // get tasks from storagelet arr = getTasks();

    // loop through taskslet foo = '';
    arr.forEach(item => {
        foo += `
                    <li>${item}<button>X</button></li>
                    `;
    });

    // append tasks to dom
    ul.innerHTML = foo;

});

<divclass="row"><inputid="userInput"type="text"placeholder="New item..."maxlength="190"autofocus><buttonid="enter">Add</button></div><divclass="row"id="items"><divclass="listItems col-12"><ulclass="col-12 offset-0 col-sm-8 offset-sm-2"></ul></div></div></div>

Solution 2:

It depends on the use case, if it's something like managing date centrally you need to go with database. if it is some minor data user specific you can go with local storage.

To use localStorage in your web applications, there are five methods to choose from:

setItem(): Add keyand value to localStorage
getItem(): Retrieve a value by the keyfrom localStorage
removeItem(): Remove an item bykeyfrom localStorage
clear(): Clear all localStorage
key(): Passed a number to retrieve nth keyof a localStorage

setItem()

window.localStorage.setItem('name', 'Obaseki Nosa');

const person = {
    name: "Obaseki Nosa",
    location: "Lagos",
}
window.localStorage.setItem('user', JSON.stringify(person));

getItem()

window.localStorage.getItem('user');

JSON.parse(window.localStorage.getItem('user'));

removeItem()

window.localStorage.removeItem('name');

clear()

window.localStorage.clear();

Note: localStorage is synchronous, with no data protection and limited to 5MB across all major browsers