How to save elements in localStorage and send to another page?

Question

I would like to save some fields from my main page and send to my "cart" page. Ex: I would like to save the title of a product to display on another page without using a database.

What I have so far:

HTML: <h1 class="tituloProd">Arroz Tio João integral tipo 1 - 5KG</h1>

JS:

  $('#btnCompra').click (function(){
      localStorage.setItem('tituloProd', $(".tituloProd").val());
      console.log(tituloProd);
  });
});

Answer 1

If it is on the same domain you can access on any page.

EX: url: www.meusite.com.br/buy/

localStorage.setItem("cart","Blabla")

url: www.meusite.com.br/cart/

localStorage.getItem("cart")

"Blablah"

EDITING: To make it easier:

Accessing the file directly in the EX folder: c://project/pages/index.html and c://project/pages/page2.html is like you have simply 2 different websites and so your localStorage cannot communicate with both folders.

It is necessary that you create a server that shows these two pages and then you will be able to use the localStorage in the desired way. Creating a server is not difficult.

First you install Ode, if you don’t have. https://nodejs.org/en/

Make this folder structure

projeto:
--paginas:
----index.html
----page2.html
--js:
----index.js
--css:
----style.css
--img:
--server.js

open terminal or cmd in project folder.

Typo

npm init -y

This will create a package.json file to manage your project.

Then type:

npm i --save-dev express

This will download the Express that will help you mount your mini server.

Then open the server.js file and type:

const express = require('express')
const server = express();

const path = require('path')
server.get('/', function(req, res) {
       res.sendFile(__dirname + "/paginas/index.html");
       // Cria a rota para a home do seu site que vai ser quando vc não digitar nada
});

server.get('/page2', function(req, res) {
       res.sendFile(__dirname + "/paginas/page2.html");
       // Cria a rota para a page2 do seu site que vai ser quando vc digitar /page2
});
server.listen(8084);
console.log('Servidor rodando na porta 8084');

READY is all configured.

your folder will look like this:

projeto:
--node_modules:

--paginas:
----index.html
----page2.html
--js:
----index.js
--css:
----style.css
--img:
--server.js
--package.json

In your terminal type:

Node . /server.js

this will start your server on port 8084 of your localhost.

now just access;

http://localhost:8084/ You go to your home.

and type: http://localhost:8084/page2 goes to page2

thus the two pages now belong to the same domain "localhost" and you can use localStorage