How to exchange variables between two HTML pages?

In exchanging variables between two HTML pages, there are typically several methods:

1. Using URL Parameters

By adding query parameters to the URL, variables can be passed between pages. For example, when navigating from page A to page B, variables can be included in the URL:

Page A URL: http://example.com/pageA.html

When transitioning from page A to page B, variables can be transmitted via the URL:

html
<a href="http://example.com/pageB.html?variable=value">Go to Page B</a>

On page B, the variable can be retrieved using JavaScript:

javascript
const urlParams = new URLSearchParams(window.location.search);
const myVariable = urlParams.get('variable');
console.log(myVariable); // Outputs "value"

2. Using localStorage or sessionStorage

localStorage and sessionStorage provide mechanisms for sharing data across different pages. localStorage stores data without an expiration time, while sessionStorage data is cleared when the page session ends (e.g., closing the browser tab).

Setting the variable (on page A):

javascript
localStorage.setItem('myVariable', 'value');

Retrieving the variable (on page B):

javascript
const myVariable = localStorage.getItem('myVariable');
console.log(myVariable); // Outputs "value"

3. Using Cookies

Cookies can also be used to share data across different pages. Setting cookies is typically implemented using JavaScript:

Setting the cookie (on page A):

javascript
document.cookie = "myVariable=value; path=/; expires=Fri, 31 Dec 9999 23:59:59 GMT";

Retrieving the cookie (on page B):

javascript
const getCookie = name => {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
};

console.log(getCookie('myVariable')); // Outputs "value"

4. Using Server-Side Techniques

In certain scenarios, variables can be stored on the server. When users navigate from one page to another, the server can inject the stored variables into the page.

Example:

On the server side (e.g., using Node.js and Express), variables can be passed to the view when users request a page:

javascript
app.get('/pageB', (req, res) => {
    const variableFromPageA = req.session.myVariable || 'defaultValue';
    res.render('pageB', { myVariable: variableFromPageA });
});

Here, session is used to store variables, which requires appropriate middleware such as express-session.

Summary

Each method has its own advantages and disadvantages. The choice depends on the specific application requirements and context. URL parameters are suitable for simple data transfer without privacy concerns; localStorage is ideal for larger data storage without server involvement; cookies are appropriate for persistent lightweight data; server-side techniques are best for high-security scenarios requiring complex state management.