Share data between HTML pages

Question

I want to send some data from one HTML page to another. I am sending the data through the query parameters like http://localhost/project/index.html?status=exist. The problem with this method is that data remains in the URL. Is there any other method to send the data across HTML pages using JavaScript or jquery.

Possible duplicate of [Share variables between html pages](http://stackoverflow.com/questions/21128692/share-variables-between-html-pages) — Darshak, Feb 04 '17 at 09:09
DownVote because there are some many question available here related to this stack overflow — Darshak, Feb 04 '17 at 09:11
:- so what?...it is still in this website you can easily get that — Darshak, Feb 04 '17 at 09:14
Possible duplicate of [Persist variables between page loads](https://stackoverflow.com/questions/29986657/persist-variables-between-page-loads) — Liam, Dec 18 '17 at 15:29
As of May 2019 this is currently the top Google result for this particular issue. If anything, other questions should be redirected to this one. — Jess, May 16 '19 at 03:06
No... That's not how it works. The best **quality** question or answer is the correct target. [The answer on the dupe target](https://stackoverflow.com/a/30070207/542251) is considerably better than anything on this. — Liam, Sep 24 '21 at 15:14

score 75 · Accepted Answer · edited Dec 11 '21 at 09:03

75

why don't you store your values in HTML5 storage objects such as sessionStorage or localStorage, visit HTML5 Storage Doc to get more details. Using this you can store intermediate values temporarily/permanently locally and then access your values later.

To store values for a session:

sessionStorage.setItem('label', 'value')
sessionStorage.getItem('label')

or more permanently:

localStorage.setItem('label', 'value')
localStorage.getItem('label')

So you can store (temporarily) form data between multiple pages using HTML5 storage objects which you can even retain after reload..

edited Dec 11 '21 at 09:03

Alexandros Kourtis

539
2
6
20

answered Jul 23 '12 at 09:06

Neji

6,591
5
43
66

i cant understand where do u define this lines? thank ;S – Alberto Acuña Mar 30 '16 at 08:24
It was useful, thank you, but when trying to share multiple fields with variables('value'), it does not set values given from variables to items('label') between Web pages. could you please explain the reason? – Kasumi Gunasekara Dec 13 '18 at 14:46
This solution will only work if the pages are on the same domain, since `localStorage` cannot access data from other domains. But there are [several other ways](https://stackoverflow.com/questions/33957477/cross-domain-localstorage-with-javascript) to share data between pages on different domains. – Anderson Green Aug 25 '21 at 21:22

score 23 · Answer 2 · answered Feb 06 '14 at 19:10

I know this is an old post, but figured I'd share my two cents. @Neji is correct in that you can use sessionStorage.getItem('label'), and sessionStorage.setItem('label', 'value') (although he had the setItem parameters backwards, not a big deal). I much more prefer the following, I think it's more succinct:

var val = sessionStorage.myValue

in place of getItem and

sessionStorage.myValue = 'value'

in place of setItem.

Also, it should be noted that in order to store JavaScript objects, they must be stringified to set them, and parsed to get them, like so:

sessionStorage.myObject = JSON.stringify(myObject); //will set object to the stringified myObject
var myObject = JSON.parse(sessionStorage.myObject); //will parse JSON string back to object

The reason is that sessionStorage stores everything as a string, so if you just say sessionStorage.object = myObject all you get is [object Object], which doesn't help you too much.

score 5 · Answer 3 · answered Jul 23 '12 at 09:05

5

possibly if you want to just transfer data to be used by JavaScript then you can use Hash Tags like this

http://localhost/project/index.html#exist

so once when you are done retriving the data show the message and change the window.location.hash to a suitable value.. now whenever you ll refresh the page the hashtag wont be present
NOTE: when you will use this instead ot query strings the data being sent cannot be retrived/read by the server

answered Jul 23 '12 at 09:05

Parv Sharma

12,581
4
48
80

This isn't a "hashtag." It's a [URL fragment](https://en.wikipedia.org/wiki/URL_fragment). – Anderson Green Nov 19 '20 at 17:39

score 3 · Answer 4 · edited Jul 23 '12 at 10:12

Well, you can actually send data via JavaScript - but you should know that this is the #1 exploit source in web pages as it's XSS :)

I personally would suggest to use an HTML formular instead and modify the javascript data on the server side.

But if you want to share between two pages (I assume they are not both on localhost, because that won't make sense to share between two both-backend-driven pages) you will need to specify the CORS headers to allow the browser to send data to the whitelisted domains.

These two links might help you, it shows the example via Node backend, but you get the point how it works:

Link 1

And, of course, the CORS spec:

Link 2

~Cheers

Share data between HTML pages

4 Answers4

Linked

Related