How to pass text from one page to another by clicking on div using JQuery/JavaScript

Question

I'm making a school project and i am stuck here for almost a week. what i am trying to get is... I have 2 pages PAGE 1 have more than five divs with different titles. I want to copy that specific title that the user clicks on and want to paste it on PAGE 2. I have tried so many ways but still not getting the answer.

    <!--Page 1 Start-->
    <section class="main-content">
        <div class="blog-cards egypt">
            <div class="blog-card-details">
                <h2 class="card-title"><a href="#">Div 1</a></h2>
                <a href="#">Abū Sulţān </a><span>•</span><a href="#"> Egypt</a>
            </div>
        </div>
        <div class="blog-cards london">
            <div class="blog-card-details">
                <h2 class="card-title"><a href="book-now.html">Div 2</a></h2>
                <a href="#">Kensington and Chelsea </a><span>•</span><a href="#"> London</a>
            </div>
        </div>
    </section>
    
    <!--Page 1 End-->
    <!--Page 2 Start-->
    <section class="page2-main">
        <h3 class="result-show-here"></h3>
    </section>

What i want is if i click Div 1 it will show text of .card-title on Page 2 .result-show-here. and if i click Div 2 it will show text of .card-title on Page 2 .result-show-here. and i don't want to change the class

Are the pages on another tab? If yes try with localstorage: https://www.w3schools.com/html/html5_webstorage.asp — AndyNope, Jul 25 '19 at 10:40
Possible duplicate of [Share data between html pages](https://stackoverflow.com/questions/11609376/share-data-between-html-pages) — Patrick, Jul 25 '19 at 10:40
I just edited my answer. Please check. I hope I could help you. — AndyNope, Jul 25 '19 at 11:22

AndyNope · Accepted Answer · 2019-07-25T11:32:16.007

https://www.w3schools.com/html/html5_webstorage.asp

Use localStorage or sessionStorage:

$('div').on('click', function() {
    localStorage.text = $(this).find('a').val(); //or sessionStorage.text
});

and

$('.result-show-here').html(localStorage.text);//or sessionStorage.text

First create a page handler on your script using jQuery:

var pg
switch (pg) {
        case 'page1':
            //the code for page1
            break;
        case 'page2':
            //the code for page2
            break;
    }

In your case:

for page1: on your HTML-Page:

<script>pg = 'page1';<script>

and in your script:

//the code for page1
$('div').on('click', function() {
    localStorage.text = $(this).find('a').val();
});

for page2:

on your HTML-Page:

<script>pg = 'page2';<script>

and in your script:

//the code for page2
$('.result-show-here').html(localStorage.text);

Based on your case.

I prefer to add a class on the a-tag like <a class="city">London</a> and get the right value:

//the code for page1
    $('div').on('click', function() {
        localStorage.text = $(this).find('.city').val();
    });

score 1 · Answer 2 · answered Jul 25 '19 at 10:47

If your pages are hosted by some sort of webserver you can use websockets to communicate/share data.

If your pages are opened on the same machine/browser without any server i would recommend using the browsers session- or localstorage objects. To set a value use:

sessionStorage.myValue = 'value'

To get a value use:

var val = sessionStorage.myValue

Take a look here.

How to pass text from one page to another by clicking on div using JQuery/JavaScript

2 Answers2