How to Share Data Between HTML Pages in JavaScript: Transferring Variables with window.onload and localStorage

Transferring Variables Between HTML Pages in JavaScript

In scenarios involving multiple HTML pages, the need often arises to transfer variables from one page to another. To address this challenge, this article will explore two methods: window.onload and localStorage, providing a comprehensive solution to sharing data between pages.

Background

The provided code includes two functions: save_price() and read_price(), with the goal of storing and retrieving a user-input value in a global variable. However, the problem arises when using the global variable price on page 2, where it returns "undefined" due to the lack of global scope in JavaScript.

Solution Using window.onload

The difficulty with using window.onload is that the attempted function call is incorrect. The correct format should be:

window.onload = function() {
  read_price();
};

This solution, while functional, has certain limitations. Global variables can create challenges in maintenance and code readability, especially in larger applications.

Alternative Solution Using localStorage

localStorage offers a safer and more efficient approach to data transfer between pages without the need for global variables. This mechanism allows for the storage of key-value pairs that persist across page reloads and browser sessions.

Code Implementation

Page 1:

window.onload = function() {
  var getInput = prompt("Enter a value: ");
  localStorage.setItem("value", getInput);
};

Page 2:

window.onload = function() {
  alert(localStorage.getItem("value"));
};

Benefits of localStorage

• Persistent Storage: Data remains accessible even after closing and reopening the browser.
• Vast Storage Capacity: Allows for storing large amounts of data, unlike cookies.
• Server-Side Avoidance: Unlike cookies, data is not sent back to the server with each request.

Conclusion

Both window.onload and localStorage provide methods for transferring variables between pages, with localStorage emerging as the preferred solution due to its wide-ranging benefits and ease of use. By leveraging the power of localStorage, developers can efficiently share data across pages, enhancing user experience and streamlining development processes.

The above is the detailed content of How to Share Data Between HTML Pages in JavaScript: Transferring Variables with window.onload and localStorage. For more information, please follow other related articles on the PHP Chinese website!