Exchange of content between pages with Javascript

Question

I need to exchange a text that is in a <p> from one page x to one page <p> one-page y.

As part of a bimonthly presentation (course work) I can use HTML, CSS3 and Javascript.

You can do that with some of these technologies?

---

Excuse my lack of clarity with the question, I wanted to actually leave most of the texts saved on a page that would not be loaded and would serve only for such, being accessed only the text in question and displayed on the page where the user was. I researched a little on the subject and could only do something like this by php. Sorry for the work and thanks.

Answer 1

This is possible with Javascript. You have two alternatives:

• go through the URL
• store in the localStorage

HTML example

Assuming the content you want to pass is this:

<p id="comentario">Hoje está um lindo dia!</p>

Going through the URL

You can insert this text into the URL that opens the next tab. The format will be

http://teusite.com/pasta/subpasta?comentario=Hoje%20est%C3%A1%20um%20lindo%20dia!

The part of the URL after ? is called querystring and exists to pass data between pages or server.

To insert content into the URL you will need to change the links in the HTML. The best way is with Javascript using encodeURIComponent() which is a native method for converting text into accepted format in the URL.

So you have to find the link you want to open the next page and change:

Example:

HTML

<a id="ancora" href="novapagina.html">Clique aqui</a>

Javascript

var texto = document.getElementById('comentario').innerHTML;
var ancora = document.getElementById('ancora');
ancora.href = ancora.href + '?comentario=' + encodeURIComponent(texto );

This way, when the link is clicked it will open the new page with information in the URL/Querystring.

And how to read this on the new page?

To read this on the new page uses the location.search to give you the querystring and then remove what interests you:

Javascript

var qs = location.search;
var textoDesformatado = qs.split('=');
var textoFinal = textoDesformatado[1] && decodeURIComponent(textoDesformatado);
// e depois, para inserir no novo <p id="comentario"></p> basta fazer
document.getElementById('comentario').innerHTML = textoFinal;

Note:

you can also open a new Javascript page directly. In this case it would be something like:

location.href = '/pasta/subpasta?comentario=' + encodeURIComponent(texto );

Going by the localStorage

The Storage location is the browser memory and is active even after shutting down the computer. In other words, the computer writes to an internal file in the browser and I saw it later.

So to write to localStoragd just do:

localStorage.comentario = document.getElementById('comentario').innerHTML;

and, on the new page, to read the code just do the opposite:

document.getElementById('comentario').innerHTML = localStorage.comentario;

Note:

There are more alternatives using the server, but I don’t include them because you only mentioned client-side technology.

Answer 2

has how to do this using various technologies and in various ways. but using only html/css, here goes:

pagina1.html

<h1>origem</h1>
<p id="p1">Primeiro</p>
<a href="pagina2.html" id="link">ir para a página 02</a>
<script>
    $('#link').attr( 'href', 'pagina2.html?' + $('p1').html() );
</script>

page2.html

<h1>destino</h1>
<p id="p2"></p>
<script>
    var content = (location+"").split('?')[1].split('=')[1];
    $('#p2').html(content);
</script>