• Home
  • Subscribe
  • Contribute Us
    • Share Your Interview Experience
  • Contact Us
  • About
    • About CSEstack
    • Campus Ambassador
  • Forum & Discus
  • Tools for Geek
  • LeaderBoard
CSEstack

What do you want to Learn Today?

  • Programming
    • Tutorial- C/C++
    • Tutorial- Django
    • Tutorial- Git
    • Tutorial- HTML & CSS
    • Tutorial- Java
    • Tutorial- MySQL
    • Tutorial- Python
    • Competitive Coding Challenges
  • CSE Subject
    • (CD) Compiler Design
    • (CN) Computer Network
    • (COA) Computer Organization & Architecture
    • (DBMS) Database Management System
    • (DS) Data Structure
    • (OS) Operating System
    • (ToA) Theory of Automata
    • (WT) Web Technology
  • Interview Questions
    • Interview Questions- Company Wise
    • Interview Questions- Coding Round
    • Interview Questions- Python
    • Interview Questions- REST API
    • Interview Questions- Web Scraping
    • Interview Questions- HR Round
    • Aptitude Preparation Guide
  • GATE 2022
  • Linux
  • Trend
    • Full Stack Development
    • Artificial Intelligence (AI)
    • BigData
    • Cloud Computing
    • Machine Learning (ML)
  • Write for Us
    • Submit Article
    • Submit Source Code or Program
    • Share Your Interview Experience
  • Tools
    • IDE
    • CV Builder
    • Other Tools …
  • Jobs

[Solved] How to Pass Data to Another Page using JavaScript LocalStorage?

Aniruddha Chaudhari/36786/4
CodeHTML & CSS

In this quick guide, I will share the code to pass data to another page using JavaScript localStorage. Before that, you should know why do you need localStorage and how does it work.

Why localStorage?

Usually, we can pass the data from one page to another page as a parameter in the URL. Passing those values in URL has certain disadvantages.

  • If the data is too big, a URL with a long string doesn’t look good.
  • Displaying important data in the URL to the user can be harmful to your data security.

Another way is to use the POST method. For this, you need to create an HTML form.

If you want to avoid passing data into the URL or creating a form, leverage the use of localStorage with the simple JavaScript.

So using localStorage,

  • You don’t need to pass the data in URL.
  • You don’t need to create the HTML form.

What is localStorage in JavaScript?

It is a property that allows you to store the data in a web browser for a session.

How does localStorage work?

With the localStorage property, we can save the data into the browser. You can retrieve that data for the same or for any other web page.

Here, local storage acts as an intermediate to save and read the data.

JavaScript has simple functions to save and get the data. All the data saved in local storage is in the form of a key-value pair.

How to Pass the Data to Another Page withing passing it in URL?

HTML and Javascript Code for testing localStorage:

<!DOCTYPE html>
<html>
<body>

<script>
    // Check browser support
    if (typeof(Storage) !== "undefined") {
    // Store
    localStorage.setItem("programming", "Python");
    }
</script>

</body>
</html>

Save it as first.html.

It will save the data (programming(key)/Python(value)) in the local browser.

Note: It is always good practice to check if your browser supports the localStorage property, though it is supported by most of the popular browsers.

Now let’s write an HTML and JavaScript code to read this data.

<!DOCTYPE html>
<html>
<body>

<div id="result"></div>

<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("programming");
} else {
document.getElementById("result").innerHTML = "Browser does not support Web Storage.";
}
</script>

</body>
</html>

Save it as second.html.

Save both the files in a common directory. And open them in browser tabs. Using second.html, You are able to read the value you have set for programming using first.html.

Note: In the above code, we have added JavaScript code inside the HTML page itself. You can add it externally as well.

Important Points to Note about localStorage:

  • All the data saved using localStorage is saved in the key-0value pair.
  • It is a read-only property.
  • Almost all the latest versions of popular browsers support this property.
  • The data saved using this property does not have an expiration date.
  • It is different from the sessionStorage JavaScript property. It saves the data for a particular session.
  • Unlike sessionStorage, data saved using localStorage will not be deleted on the closing browser tag.

Other important topics from HTML:

  • 7 Basic HTML Tags with Example [Most Useful in Every Web page Development]
  • 20+ Best HTML Web Form Design Practices [It Has Helped Me Grow Professionally]

This is all about a quick tutorial to pass data to another page using JavaScript localStorage. If you have any question, feel free to discuss in the comment.

Python Interview Questions eBook

HTMLJavaScript
Aniruddha Chaudhari
I am complete Python Nut, love Linux and vim as an editor. I hold a Master of Computer Science from NIT Trichy. I dabble in C/C++, Java too. I keep sharing my coding knowledge and my own experience on CSEstack.org portal.

Your name can also be listed here. Got a tip? Submit it here to become an CSEstack author.

Comments

  • Reply
    Alann
    March 28, 2020 at 2:37 am

    Hi Aniruddha, does this localhost support for all browsers?

    • Reply
      Aniruddha Chaudhari
      March 28, 2020 at 7:51 am

      Hi Alann, I think you mean to say localstorage and not localhost. Yes, all popular browsers support localstorage concepts.

  • Reply
    Mukesh
    January 30, 2021 at 9:29 pm

    Sir, I want to send data from one webpage to another webpage.
    Will you please send me the code how can I do it?
    I tried a lot but I couldn’t.
    Sir, please send me the coding in my email.
    the email is (email id is hidden.)

    • Reply
      Aniruddha Chaudhari
      January 31, 2021 at 8:07 am

      Hi Mukesh,

      There can be multiple ways based on how you make the interface between those two web pages.

      If you add a link from one page to another, you can pass the data in the request body or the URL parameters. If you don’t have an interface and want those two web pages to work independently, save the data from one page (maybe inside the database or some text file.) Use that data in your second webpage.

Leave a Reply Cancel reply

HTML CSS & JavaScript

  • HTML- First Program
  • HTML- Basic Tags
  • HTML- Adding CSS
  • HTML- Best Form Design Practices
  • HTML- Text Indent using CSS
  • HTML- Drop Cap using CSS
  • HTML- Add Favicon
  • HTML- Adding ToC on Website
  • HTML- Save Page as PDF
  • CSS- 17 Tips for Optimizing CSS
  • CSS- Adding Image Shadow
  • Show/Hide Password on Login Form
  • Pass Data to Another Web Page [JS]
  • Horizontal Scrolling on Mobile Web

HTML Editing Tools

  • HTML- Online Editor
  • HTML- Novi Builder

© 2022 – CSEstack.org. All Rights Reserved.

  • Home
  • Subscribe
  • Contribute Us
    • Share Your Interview Experience
  • Contact Us
  • About
    • About CSEstack
    • Campus Ambassador
  • Forum & Discus
  • Tools for Geek
  • LeaderBoard