How to send data from one html file to another

have you ever wanted to send data from one html file to another, if yes you can do it by linking the same javascript file to both the html files in this way you can access the data(say stored in a variable) from both html files.

😅 just kidding, that wouldn't work as the browsers fetches all the files as soon as the site reloads and the variables will be destroyed anyway.

So How Can That Be Done?

well there are several ways to do it, here are some of them :-

• Local Storage

• Session Storage

• Through Query parameter

However, my favorite one is using the query parameters, especially when the data is small enough like a search string.

Query Parameters

Sending Data

you can send parameters directly from the URL itself as you see below. ( ./page.html?2 2 was passed as a query param to another HTML file, the query parameters are passed after a ? "question mark". )

<a href="./page.html?2"> go to page 2 </a>

or you can also do this dynamically using javascript

let data = "anything";
window.open(`./page.html?${data}`, "_blank");
// this will open the url in a new tab

Receiving it from other pages

let queryString = location.search;
// ?data

let queryString = queryString.substring(1);
// data