How to use localStorage across web pages

Question

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

Answer 1

You can use the VS-Code extension known as a live server and then run the index.html through that or you can use any other thing be it apache or anything to create a localhost then the prefix will be the same which will make sure that you can access the same local storage for that URL in your browser

so for example

http://localhost:3000/ will be the base url so you will store the data in local storage for this URL which will be accessible at http://localhost:3000/comunidade.html

So base URL needs to be the same to access the local storage in your case base URL was getting changed because of the file path

Answer 2

LocalStorage-Items are host-own, so only the host who wrote them can read them. Use cross-page cookies or a cloud.