Pass a Variable Value from One HTML Page to Another

Рет қаралды 54,982

2 жыл бұрын

👉 Source code: openjavascript.info/2022/06/0...
💬 Like to chat JS/webdev? Say hello on our new community forum: forum.openjavascript.info
⚡ Looking for high-performance, affordable web hosting for your website or app? We use HostWithLove: bit.ly/3V2RM9Q ❤️
This tutorial shows you how to pass a data value from one HTML page to another by saving it in to local storage in a user's browser and extracting it on another page.
#javascript #localstorage #frontend #tutorial #webdevelopment #webdev #webdeveloper #js #coding #programming #html5
⚡ NEW: Web development courses from Meta Inc. ⚡
Front-End Developer Professional Certificate: imp.i384100.net/b3dMek
Back-End Developer Professional Certificate: imp.i384100.net/gbYorg
iOS Developer Professional Certificate: imp.i384100.net/Jr7qj2
Meta Android Developer Professional Certificate: imp.i384100.net/oeYnGo
Meta Database Engineer Professional Certificate: imp.i384100.net/BX7KGB
Website: openjavascript.info
Twitter: / openjavascript

Пікірлер: 107

@OpenJavaScript Жыл бұрын

Thanks for watching! 👉 Code for this tutorial: openjavascript.info/2022/06/09/pass-data-from-one-html-page-to-another/

@dgh25 Жыл бұрын

You dont need line 26, simply call the form as its id, no need for getelementbyid.

@OpenJavaScript Жыл бұрын

@@dgh25 Have to select the form somehow. What solution do you have in mind?

@dgh25 Жыл бұрын

@@OpenJavaScript You are already "selecting" it by "form.addEventListener" where "form" is the id of the form. (I deleted line 26, and it still works.)

@feitan7712 Жыл бұрын

Why does the preventdefault function work internally but not externally

@OpenJavaScript Жыл бұрын

@@feitan7712 When you call e.preventDefault() it sets a property on the event object that is created (in the background) to false and that is used to prevent whatever default behavior has been set for the event. To trigger this property to be false, you must call preventDefault() on the event object that is made available to you because this was produced by the event and can set its 'defaultPrevented' property. If you are interested in looking into this more deeply, I created an entire tutorial on creating a custom event, including how to prevent a default behavior. Here's the relevant bit: kzfaq.info/get/bejne/ap2eaJZ-mLuYh3U.htmlm20s

@castro4694 8 ай бұрын

I was offered an internship if could finish a tech challenge in which I consume an API and part of the test was opening another page with the content from the search of the first one. This is exactly what I needed

@suzunyan00 Жыл бұрын

My goodness, did you save me! Was struggling with this for the past few hours and all the other solutions were so unnecessarily complicated. Also, this was explained in such a simple way. Thanks a lot.

@OpenJavaScript Жыл бұрын

You are welcome, glad you found it useful :)

@SyriousMedia 9 ай бұрын

This was exactly what I was looking for. I'm using multiple pages and a separate JS script file but I only had to accommodate a little to make things work. Thank you!

@thucle4122 Жыл бұрын

Was struggling at 2a.m and then found your vid man, it's tremendously helpful for a beginner in the web dev field like me. Thanks you.

@OpenJavaScript Жыл бұрын

Been there myself a few times 😂 So glad to hear the tutorial was able to help you out!

@LordKraken3 2 ай бұрын

This was exactly the tutorial I'm looking for to complete a project for my Web Design class; thank you so much!

@SamHodges-ht7xt Жыл бұрын

I'm Very thankful that you have made this tutorial. Helped me out a lot :)

@OpenJavaScript Жыл бұрын

That's great! Glad this helped you out :)

@therealshelly Жыл бұрын

I FREAKING LOVE YOU, YOU SAVED ME BRO

@OpenJavaScript Жыл бұрын

Glad I could help!

@Im_Pranav Жыл бұрын

Amazing the exact video i was searching for 🙏

@OpenJavaScript Жыл бұрын

That's great, glad it helped you!

@jitendrapuri Жыл бұрын

very articulate and well explained. Thank you.

@OpenJavaScript Жыл бұрын

Thank you, I'm glad you found it useful!

@andrews13 Жыл бұрын

This is an underrated channel!

@OpenJavaScript Жыл бұрын

Thank you, I'm glad you like the content, I'll try to keep it coming :)

@noneofurbusiness8809 Жыл бұрын

this helped me to finally understand it!!

@OpenJavaScript Жыл бұрын

That's great! It's hard for me to gauge how helpful my videos are beyond views and likes. So really appreciate you taking the time to let me know that this helped you understand this. Thanks!

@MrBenske4 11 ай бұрын

great guide mate! im wondering if you could help me a bit. im following this guide but im trying to make both html pages i have interact with one javascript document. my issue is everytime it navigates to the next html page, all of my ids and variables from the previous page get ost and return null on the next page. ive used local storage for several things but for instance my variable holding the id for form gets lsot when it navigates to the next html document. if you have any suggestions that would be great. cheers

@jzurgegarcia7107 Жыл бұрын

Finally found this as it resolves my issue. Can you also create tutorial on concatenating selected values from 2 or more drop down, and checkbox and send to another HTML page

@OpenJavaScript Жыл бұрын

I was asked a similar question in one of the other comments...so I think I should do this. Coming soon!

@jzurgegarcia7107 Жыл бұрын

@@OpenJavaScript please do this master. hope very soon😄

@NaVindu69 Жыл бұрын

jst what i was searching for thanks a lot

@OpenJavaScript Жыл бұрын

Always nice to hear that and you're welcome!

@CRCE__Lionel_Castelino Жыл бұрын

thankyou ! this video helped me in my project

@OpenJavaScript Жыл бұрын

You're welcome, glad it helped!

@wifi779 7 ай бұрын

Great Vedio , thank you

@user-or6uy6yc8d Жыл бұрын

a tremendous help to me. I like your video a lot. Hope that you'll post more videos.

@OpenJavaScript Жыл бұрын

That's great to hear that you found this useful. Thanks for reaching out to let me know. There are lots more videos on the way, so if you haven't already, you might want to subscribe so you don't miss them :)

@grejs6832 5 ай бұрын

Hi thank u so much! But why does it only save the first input for me? Even if i put a different input it remains the first input remains in the local storage

@Shinobu-qv7vd Жыл бұрын

So Good So Thank you for this video I would suck without this video

@OpenJavaScript Жыл бұрын

Haha I'm not that's not true. Thanks though!

@Asurow Жыл бұрын

I know session and local storage exists but was wasted unit this video. 😆Thank you.

@OpenJavaScript Жыл бұрын

Glad you found this useful! Thanks for reaching out :)

@whoass Жыл бұрын

Saved!

@OpenJavaScript Жыл бұрын

Great :)

@vinces.9148 Жыл бұрын

Is there a way to do this with a dropdown selection and dates? Say a hotel website or airline look up type of situation? I am thinking the index page has a form with 3 values (say location, start date, end date) and the second page has a reservation page with a form of 5 values that would be blank if loaded by itself. If loaded from the user selection on the index page, their choices would be preloaded, but still able to be changed, and the other options being blank. Thanks for all the great videos!

@OpenJavaScript Жыл бұрын

Yes, that is absolutely possible. You would need to save the values in localStorage or SessionStorage on the first page. Then on the next page, run some code immediately that would populate the values of the page with those of the previous one. I have been asked in another comment about this so will make a video on this soon!

@ByzaOCE Жыл бұрын

Great video mate, I'm new to all this, and the first example of displaying the passed local storage worked, but i see you haven't finished the code off for object and array to display what has been stored in first & last name fields, got me lost.

@OpenJavaScript Жыл бұрын

Ah, see what you mean there. Could have been clearer towards the end. Lots of commented out code and switching between pages. But glad you found it useful (in the end!)

@ByzaOCE Жыл бұрын

@@OpenJavaScript and displaying the result in the next page like you did for the first example. Thanks for taking the time to respond :)

@OpenJavaScript Жыл бұрын

@@ByzaOCE Thank you for the feedback! Appreciated.

@tomislavbusic2652 Жыл бұрын

Thank you!!!!

@OpenJavaScript Жыл бұрын

You're welcome. Thanks for watching!

@julietferreira9031 Жыл бұрын

Thank you soooo muchh!!!!!!!!

@OpenJavaScript Жыл бұрын

Glad you found this useful!

@EOTStorm Жыл бұрын

Thank you for this video. Helped me out tremendously. Is there a way to pass that variable on another HTML page that has an image? I would like the variable on top of the image. Thank you.

@OpenJavaScript Жыл бұрын

Yes, it is technically possible but it is only possible to store string data in local storage and it has limited space (usually about 5MB per site). You therefore have to 'stringify' the image first by creating a data URI to it (e.g. using FileReader). You then need to convert the image from the data URI back to a blob (you can find solutions for this online and also some libraries on npm).

@EOTStorm Жыл бұрын

@@OpenJavaScript Well, okay then. lol Thank you

@EstherBose-wy4tc Ай бұрын

THANK YOUUUUUUUUUUUUUUUUUUUUU

@prasunbiswas1790 6 ай бұрын

I am getting an error in the log saying , Cannot read properties of undefined (reading addEventListener) . What can I do???

@paulcal3500 Жыл бұрын

Thanks for the vid. It's helpful, but is this the most efficient and easiest way to store variables with JS?

@OpenJavaScript Жыл бұрын

I'd say much easier to use than the alternative, IndexedDB, though some don't like the fact that local storage is blocking (synchronous). However, for most variable values, unless stringified files, the data is small enough that it is so quick to save and retrieve as to not really make a difference to user experience (note local storage only accepts string data, I have created a more general tutorial about LS here: kzfaq.info/get/bejne/Y8CCd72qutCpdX0.html). However, if you do want to start storing large data items, such as files in their original format, you should take a look into IndexedDB (I don't have a tutorial on it yet but maybe I'll create one soon).

@feitan7712 5 ай бұрын

I know its been a while but I have an issue with it which may be from my end: the value of localstorage is present in the console but is never put into the HTML file itself

@asdffasdf3234 Жыл бұрын

thank you very much sir thank you again

@OpenJavaScript Жыл бұрын

You're welcome :)

@deepthikundanagurthi7203 Жыл бұрын

Finally found the solution , trying to do it from 2 days, thanks for the effort

@OpenJavaScript Жыл бұрын

I'm glad you found it useful!

@zarmr9719 Жыл бұрын

First of all thank you for this great tutorial! But I have a question: is this going to work if the website is uploaded on the internet? If I use this method to change text on my website, will the new text appear for everyone who visit my website? Or do they have to be on the same device?

@zarmr9719 Жыл бұрын

I am asking because when I try to run VS Code Server to test my html on phone, the changes always appear only on the device on which I made the changes.

@OpenJavaScript Жыл бұрын

Thank you, glad you liked the tutorial! The answer to your question is no, a value stored to local storage is local to a user's browser only. Any values stored there are not accessible by other users visiting the site. To have a value that changes for all users you need to store a global value somewhere outside the browser. You can do this by implementing a backend server with Node.js. Here I have a tutorial on how you can implement a simple counter in this way: kzfaq.info/get/bejne/o9qljNCel6-4pn0.html And here's how you can implement such a server via a shared hosting account via cPanel: kzfaq.info/get/bejne/m9N0drygmrjeYHk.html

@kyleritsuki Жыл бұрын

do have video for retrieved data from database like firebase?

@OpenJavaScript Жыл бұрын

Unfortunately not yet...but I will keep it in mind for a future tutorial ;)

@Lipunya Жыл бұрын

can you write an example with checkbox and radiobutton plz!!!

@OpenJavaScript Жыл бұрын

I will include more examples with these in my future videos :)

@vanninany Жыл бұрын

will it be possible to pull that local storage info into the html code and display it? if so how? or do you have a recommended video for that? thank you so much for the amazing content

@jakob.s3039 Жыл бұрын

I managed to get it to work with a constant declaration (const data = JSON.parse(...)), and then changing document.getElementByID("...").textContent = data.fn

@jakob.s3039 Жыл бұрын

so, inside of next.html, just add a const declaration for myObject, and then refer to the value fn in the record {fn: firstNameValue, ln: lastNameValue} (in index.html). for example: First Name: const data = JSON.parse(localStorage.getItem("myObject")); document.getElementByID("first-name").textContent = data.fn

@vanninany Жыл бұрын

@@jakob.s3039 Excellent! You’re the best thank you so much :). One last thing - would the sessionStorage data appear if you were to have the button open up the next.html page on a separate window? (versus on the same window that index.html was initiated on)

@jakob.s3039 Жыл бұрын

@@vanninany No worries :) sessionStorage data does not seem to disappear when you go from start.html to next.html. I tried closing everything down, and when I came back to next.html, the data was still there locally :D It can be reset by clearing cookies (or opening up an incognito tab).

@marior5361 Жыл бұрын

@@jakob.s3039 is there a way to save the value each time a button is click on a seperate html and display it. For some reason it only displays the most recent data instead of creating a new div with the new data while keeping the old one. Even tho I placed in code to create a new div with the new data.

@hackerlurcker8675 Ай бұрын

thankkkkkkkkk uu smmmmuch im soooooooooooooooooooooooooooooooo hapyyyyyyyyyyypyyppyppp

@vijaysarathi2883 Жыл бұрын

Is it possible to get input data from a user page and run that data as a function in backend and display that output to another page ?

@OpenJavaScript Жыл бұрын

Yes, for that you'll want to do what I do in this tutorial: kzfaq.info/get/bejne/mqx3Zcycr9iYhWw.html This shows you how to pass a function through localStorage but you can use this same technique to send one between frontend and backend.

@FaceBook-zb6mx Жыл бұрын

Can you please explain how we can do this with a number input. How we can save number value and use it in another html page Thank you

@OpenJavaScript Жыл бұрын

localStorage only stores string data. It will try to coerce anything you store there to string. So if you store a number there, it will be a string. So when you retrieve, parse it from string to number: localStorage.getItem(Number(itemKey))

@xxjz4034 2 жыл бұрын

Thanks god i found you

@OpenJavaScript 2 жыл бұрын

Glad you found it useful! I remember when I first came across this issue. So frustrating trying to found a solution but thankfully there is one :)

@denichasinthabag Жыл бұрын

How can I tranfer image I tried everything and I always get default image and in console it says src null

@OpenJavaScript Жыл бұрын

Try this tutorial (saving an image to localSotrage): kzfaq.info/get/bejne/jsBods2GnsvFhnU.html

@denichasinthabag Жыл бұрын

@@OpenJavaScript I looked and changed my code and it works , thanks !

@OpenJavaScript Жыл бұрын

@@denichasinthabag Great!

@nikoletakallou5257 Жыл бұрын

can you please post somewhere the hole code pleasee?

@OpenJavaScript Жыл бұрын

Here you go: openjavascript.info/2022/06/09/pass-data-from-one-html-page-to-another/

@torgeirullestad3921 Жыл бұрын

does this work in cshtml as well? (don't laugh if it seems like a stupid question please) :)

@OpenJavaScript Жыл бұрын

Personally, I haven't used cshtml. But I *think* it should be fine because it finally renders to the page as HTML. So you should have access to HTML APIs also.

@christnovs Жыл бұрын

sir how about html page to php page? can u make a video about it? thanks

@OpenJavaScript Жыл бұрын

You can only access localStorage on the client-side with JavaScript (it is actually part of the HTML Web Storage API). If you want to send it to PHP, you'll need to write some JavaScript first to get the values and then send them as you would when posting something normally.

@christnovs Жыл бұрын

@@OpenJavaScript Okay, Thanks

@yasirmohammedali Жыл бұрын

hi ... thank you

@OpenJavaScript Жыл бұрын

You are welcome!

@anandsnair7409 Жыл бұрын

thank you can you share the file pls

@OpenJavaScript Жыл бұрын

If you mean the source code, you can find it on my website: openjavascript.info/2022/06/09/pass-data-from-one-html-page-to-another/

@Marqazqiraa-at Ай бұрын

Wow

@NaVindu69 Жыл бұрын

❤❤❤❤❤❤

@OpenJavaScript Жыл бұрын

❤❤❤:)

@user-rv2dj3cd3g 7 ай бұрын

Please use an external keyboard for your videos, the hammering on the keys steals attention from your otherwise great content.

@nokee092life4 5 ай бұрын

i know this is old and that might be why but for me "window.location.href = example.html" diddnt work and i had to change "submit" in thy button type to "reset" and remove the "e.preventDefault" to make it work. else then that i love the toutorial it was exactly what i needed.