Kevin Powell - Community•2mo ago

How to prevent an array storing items from local storage from initializing each time

Hello guys, sorry to disturb you all; I'm working on a to-do list small project; I was able to add items to the localStorage and retrieve them when web page loads but the problem is each time the page loads, the array is emptied, it's re-intialized and I lost my previous saves. Have a look at my codepen: https://codepen.io/Fakeur/pen/OJKwvor Here is my JS code:

const input = document.querySelector('#task_list');
const btn = document.querySelector('.add');
const items = document.querySelector('.items');
let array_of_items = [];

btn.addEventListener('click', () => {
    if (input.value !== '') {
        let list_item = document.createElement('li');
        list_item.textContent = input.value;
        items.appendChild(list_item);
        array_of_items.push(list_item.textContent);
        console.log(array_of_items);
        localStorage.setItem('Tasks', JSON.stringify(array_of_items));
        input.value = '';
    }
})


function retrieveTasks () {
    if (array_of_items.length > 0) {
        for (let i = 0; i < retrieved_tasks.length; i++) {
            let list_item = document.createElement('li');
            list_item.textContent = retrieved_tasks[i];
            items.appendChild(list_item);
        }
    }
}

window.onload = retrieveTasks;


// The problem with this code is that the array is initialises to an empty array each time, I only overwriting previous tasks

const input = document.querySelector('#task_list');
const btn = document.querySelector('.add');
const items = document.querySelector('.items');
let array_of_items = [];

btn.addEventListener('click', () => {
    if (input.value !== '') {
        let list_item = document.createElement('li');
        list_item.textContent = input.value;
        items.appendChild(list_item);
        array_of_items.push(list_item.textContent);
        console.log(array_of_items);
        localStorage.setItem('Tasks', JSON.stringify(array_of_items));
        input.value = '';
    }
})


function retrieveTasks () {
    if (array_of_items.length > 0) {
        for (let i = 0; i < retrieved_tasks.length; i++) {
            let list_item = document.createElement('li');
            list_item.textContent = retrieved_tasks[i];
            items.appendChild(list_item);
        }
    }
}

window.onload = retrieveTasks;


// The problem with this code is that the array is initialises to an empty array each time, I only overwriting previous tasks

11 Replies

Chris Bolson•2mo ago

You need to check if the localstorage array contains data rather than just declaring an empty array, something like this:

let array_of_items = JSON.parse(localStorage.getItem('array_of_items')) || [];

let array_of_items = JSON.parse(localStorage.getItem('array_of_items')) || [];

FakerOP•2mo ago

the pipe symbols, what does it do? Like we have 2 conditions, condition 1 and condition 2; if condition 1 fails, then do condition 2 ?

ἔρως•2mo ago

not exactly the || will return the left value if truthy, and will return the right value otherwise

FakerOP•2mo ago

hmm something is truthy if it evaluates to True, like if we retrive information in this case for e.g ?

ἔρως•2mo ago

basically, if it isnt false, 0, null or undefined im not sure if nan is falsey or not

FakerOP•2mo ago

ah yep I see, like in this case, if Tasks isn't define and we try to retrieve it, we get null, null is falsy; we move on to the next expression; an empty array is considered as being truthy

ἔρως•2mo ago

undefined you get undefined

FakerOP•2mo ago

yeah I see yep I think this concept of truthy and falsy is clearer now, thanks !!!

ἔρως•2mo ago

you're welcome now, im going to throw a wrench at this: an empty array can be truthy or falsey, depends on how you check

FakerOP•2mo ago

how can it be falsy please

ἔρως•2mo ago

if you do [] == false, you get true

Gaming

Programming

How to prevent an array storing items from local storage from initializing each time