By using this site, you agree to the Privacy Policy and Terms of Use.
Accept
rocoderesrocoderes
  • Home
  • HTML & CSS
    • Login and Registration Form
    • Card Design
    • Loader
  • JavaScript
  • Python
  • Internet
  • Landing Pages
  • Tools
    • Google Drive Direct Download Link Generator
    • Word Count
  • Games
    • House Painter
Notification Show More
Latest News
Responding to and Tracking Key Presses
How to Work With Responding to and Tracking Key Presses
JavaScript
Passing a JavaScript Value Between HTML Pages
Passing a JavaScript Value Between HTML Pages
JavaScript
Compare Objects in an Array
JavaScript Problem: Compare Objects in an Array
JavaScript
Switching Name Order Using Capturing Groups in Regular Expressions
Switching Name Order Using Capturing Groups in Regular Expressions
JavaScript
Shuffling an Array
JavaScript Problem: How to Perform Shuffling an Array
JavaScript
Aa
Aa
rocoderesrocoderes
Search
  • Home
  • HTML & CSS
    • Login and Registration Form
    • Card Design
    • Loader
  • JavaScript
  • Python
  • Internet
  • Landing Pages
  • Tools
    • Google Drive Direct Download Link Generator
    • Word Count
  • Games
    • House Painter
Follow US
High Quality Design Resources for Free.
rocoderes > JavaScript > Passing a JavaScript Value Between HTML Pages
JavaScript

Passing a JavaScript Value Between HTML Pages

Admin
Last updated: 2023/02/03 at 5:42 AM
Admin
Share
6 Min Read
Passing a JavaScript Value Between HTML Pages

In this article, we are going to look at passing a JavaScript value between HTML pages. So basically we will have two HTML pages, and we will move some or information from one page to another using some basic methods. So this thing will be very much helpful when you try to create websites where you need to pass the data from one page to another. We will see this with very basic example and explanation.

Contents
Techniques For Passing a JavaScript Value Between HTML PagesPassing a JavaScript Value Between HTML Pages: Local StoragePassing a JavaScript Value Between HTML Pages: URL Query StringOutputYou may also like:

Techniques For Passing a JavaScript Value Between HTML Pages

Okay, first, let’s see some different techniques for passing a JavaScript value between HTML pages:

  • Local Storage
  • URL query string
  • IndexedDB
  • Single page application(SPA)

So these are basic methods which are helpful in doing this specific task. We are going to look at two of these methods: local storage and URL query string. Because these techniques are pretty good and straight forward, also IndexedDB is pretty similar to local storage, but it is complicated to deal with. Single page applications are none other than AngularJS and ReactJS which makes this task a lot simple than other techniques, and also it is not that topic which we can cover in this single article.

Passing a JavaScript Value Between HTML Pages: Local Storage

The first basic technique is local storage, which is actually one of the basic way to do. Local storage method is already given by JavaScript itself. Now let’s see a basic example to understand in deep, here we will try to pass time to second page from first page.

So here we create two HTML pages and two JS files associated to them. In the first HTML file, we just added a heading and a button. Then in app.js file, we have created an object for Date(), and then we added a click event on the button where we have accessed localStorage() method.

So that we can use it and store date in that using localStorage.setItem(). Then we used this window.document.location = './index2.html'; to set a targeted location where we need to access this data. Lastly, we have to run this function when this page gets loaded using document.addEventListener('DOMContentLoaded', function(){ init();})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="content">
        <h1>Click The Button To Go On Next Page</h1>
        <button id="item1">Click</button>
    </div>
    <script src="app.js"></script>
</body>
</html>
const init = (e) =>{
    let btn = document.querySelector("#item1");

    let startTime = new Date();

    btn.addEventListener('click', function(){
        localStorage.setItem('start-time', startTime.getTime());
        window.document.location = './index2.html';
    });
};

document.addEventListener('DOMContentLoaded', function(){
    init();
});

Now we have added some basic headings, and also we will add a span with id so that we can put the data in it using its ID. Then in app2.js script, we will access that data using this localStorage.getItem('start-time') method. Now we have created another object of Date() and we are just subtracting the both time values. And we have added a function call when our second page gets loaded.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="content">
        <h1>Next Page</h1>
        <h2>Here's The Amount of Time Passed: <span id="time">TIME</span></h2>
    </div>

    <script src="app2.js"></script>
</body>
</html>
const init = (e) =>{
    let spn = document.querySelector("#time");
    let endTime = new Date();
    let elapsedTime = endTime.getTime()- localStorage.getItem('start-time');
    spn.innerHTML = elapsedTime;
}

document.addEventListener("DOMContentLoaded", function(){
    init();
})

Passing a JavaScript Value Between HTML Pages: URL Query String

Now let’s see another technique to do this same task is by using URL Query String. In app.js file, we have again created an object of Date(), and we added the same click event on this button. In this, we have used window.document.location, where we specified a targeted HTML file where we will access this data. Also, we have added '?startTime=' +startTime.getTime() so that this string will be passed as URL along with time.

const init = (e) =>{
    let btn = document.querySelector("#item1");

    let startTime = new Date();

    btn.addEventListener('click', function(){
        
        window.document.location = './index2.html' + '?startTime=' + startTime.getTime();
    });
};

document.addEventListener('DOMContentLoaded', function(){
    init();
});

Now in app2.js file we have created another date object from which we will subtract startTime. Then we will fetch the time from the URL string using window.location.search() method. And from this we just need to get the time or simply data, for that, we will apply to replace method on this URL string. And we have added a regular expression, so that we can get URL string except data, and we have replaced it with blank string.

Finally, we will just subtract data from the current time. Okay, so this method should be used to pass little amount of data because the data we are passing will be reflected in to the URL.

"use strict"
const init = (e) =>{
    let spn = document.querySelector("#time");
    let endTime = new Date();
    console.log(endTime);
    let startTime = window.location.search.replace(/^.*?\=/,'');
    spn.innerHTML = endTime.getTime() - startTime;
}

document.addEventListener("DOMContentLoaded", function(){
    init();
})

Output

Passing a JavaScript Value Between HTML Pages
Passing a JavaScript Value Between HTML Pages

You may also like:

  • How to Define a Class With Properties and Methods in JavaScript?
  • How to Implement Class Inheritance in JavaScript?
  • How to Find Duplicate Elements in a Given Array?

Related

Subscribe to Our Newsletter

Subscribe to our newsletter to get our newest articles instantly!

TAGGED: javascript, Passing a JavaScript Value Between HTML Pages
Share this Article
Facebook Twitter Email Print
What do you think?
Love0
Sad0
Happy0
Sleepy0
Angry0
Dead0
Wink0
Posted by Admin
Follow:
Rocoderes is a blog you can learn HTML, CSS, JavaScript, React Js and Python along with creative coding stuff and free source code files.
Previous Article Compare Objects in an Array JavaScript Problem: Compare Objects in an Array
Next Article Responding to and Tracking Key Presses How to Work With Responding to and Tracking Key Presses
Leave a comment Leave a comment

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

- Advertisement -

You Might Also Like

Responding to and Tracking Key Presses

How to Work With Responding to and Tracking Key Presses

February 5, 2023
Compare Objects in an Array

JavaScript Problem: Compare Objects in an Array

January 30, 2023
Switching Name Order Using Capturing Groups in Regular Expressions

Switching Name Order Using Capturing Groups in Regular Expressions

January 29, 2023
Shuffling an Array

JavaScript Problem: How to Perform Shuffling an Array

January 27, 2023
rocoderesrocoderes
Follow US

Copyright © 2022 All Right Reserved By Rocoderes

  • Home
  • About us
  • Contact us
  • Disclaimer
Join Us!

Subscribe to our newsletter and never miss our latest news, podcasts etc.

Zero spam, Unsubscribe at any time.
Welcome Back!

Sign in to your account

Lost your password?