Well, I'm trying to integrate two web pages (index.html and comunidade.html), where the first one is a form where you input some data and the second one is the place where the data input is listed as cards.

To create the integration between two pages, I'm willing to implement the localStorage solution, but despite that, I've successfuly created the localStorage items in the index.html, I just can't access the data in comunidade.html page.

I already accessed the Devtools and perceived that the index.html page could persist the localStorage info, but, at the same time, the comunidade.html page localStorage is still empty.

So, how can I send the local stored data from index.html to comunidade.html?

Used code in set-card.js:

var createNewCard = document.querySelector('.project-form__submit');

createNewCard.addEventListener('click', sendData);

var cardContainerColor = document.querySelector('.project-form__style--color');
var cardContent = document.querySelector('.code-editor__input');
var cardTitle = document.querySelector('.project-form__info--name');
var cardDescription = document.querySelector('.project-form__info--description');
var cardLanguage = document.querySelector('.project-form__style--type');

function sendData() {
    if (cardContent.value != "" && cardTitle != "" && cardDescription != "") {
        
        localStorage.setItem("cardContainerColor", cardContainerColor.value);
        localStorage.setItem("cardContent", cardContent.value);
        localStorage.setItem("cardTitle", cardTitle.value);
        localStorage.setItem("cardDescription", cardDescription.value);
        localStorage.setItem("cardLanguage", cardLanguage.value);
    }
}

index.html page and it's local storage data

comunidade.html and the complete absence of any local storage data