Pass data from one HTML page to another

Last updated: November 22, 2022.

If you want data that you have in JavaScript to be available on the next page, you can store it locally on a user’s browser and recall it again using the Web Storage API.

You can access a user’s web storage with window.localStorage or window.sessionStorage. Both access the same storage space within a user’s browser, which is typically 5MB.

Make data persistent across pages with localStorage

Saving to local storage

To save to local storage space in a user’s browser, call the setItem method.

Items are saved in key-value pairs. When using setItem, you specify the key first and then pass in the data to be stored.

/* Saving data to local storage */

const myData = "Use localStorage to make data persistent!";

localStorage.setItem('test-item', myData);

console.log(localStorage);
// {
//   "test-item": "Use localStorage to make data persistent!"
// }

Retrieving from local storage

Now, on the next page, you can retrieve the item again.

For this, use getItem and pass in the key value of the data item you want to retrieve:

/* Retrieving from local storage */

const myData = localStorage.getItem('test-item');

console.log(myData);
// {
//  "test-item": "Use localStorage to make data persistent!"
// }

Storing and retrieving objects and arrays

You can only save string data to local storage.

However, custom data objects and arrays can still be passed from one page to another by converting them to string format and then parsing them back to their original format.

For the conversion to string data, use JSON.stringify:

/* Storing a stringified array and object to local storage */

const myDataObject = { 
  key: "Use localStorage to make data persistent!",
};

localStorage.setItem('test-item-object', JSON.stringify(myDataObject));

const myDataArray = ["Use localStorage to make data persistent!"]; 

localStorage.setItem('test-item-array', JSON.stringify(myDataArray));

Then, when retrieving, use JSON.parse:

/* Parsing back to JavaScript array and object */

const myDataObject = JSON.parse(localStorage.getItem('test-item-object'));

console.log(myDataObject); // {  "key": "Use localStorage to make data persistent!"  }

const myDataArray = JSON.parse(localStorage.getItem('test-item-array'));

console.log(myDataArray); // [ "Use localStorage to make data persistent!" ]

Storage limits and clearing items

Browsers typically allocate 5MB of storage space per domain. So it is possible for local storage to become full. Especially because items stored for a domain remain in local storage until cleared!

It is therefore good practice to clear items from local storage when no longer needed.

You can delete individual items using removeItem:

/* Deleting an individual item */

localStorage.removeItem('item-key');

And you can clear all items at once with clear:

/* Clear all items */

localStorage.clear();

Alternative: tab-level data persistence with sessionStorage

An alternative to using localStorage is to use sessionStorage.

It works in the same way, but data saved is only persistent for the user session. This means it is available until the tab is closed. Once this occurs, all session data is deleted.

For example:

/* Saving to session storage */

const myData = "Use sessionStorage to store data during the current session";

sessionStorage.setItem('test-item', myData);

Call this again in the same tab and the item will be recallable:

/* Calling sessionStorage in the same tab */

console.log(sessionStorage);
// {
//   "test-item": "Use sessionStorage to store data during the current session"
// }

But open a new tab and it will not:

/* Calling sessionStorage in a different tab */

console.log(sessionStorage);
// {length: 0}

Related links

MDN Web Docs: Web APIs > Web Storage API

---