No video :(

Pass a Variable Value from One HTML Page to Another

Подписаться 10 тыс.

Просмотров 58 тыс.

50% 1

👉 Source code: openjavascript...
💬 Like to chat JS/webdev? Say hello on our new community forum: forum.openjava...
⚡ 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.ne...
Back-End Developer Professional Certificate: imp.i384100.ne...
iOS Developer Professional Certificate: imp.i384100.ne...
Meta Android Developer Professional Certificate: imp.i384100.ne...
Meta Database Engineer Professional Certificate: imp.i384100.ne...
Website: openjavascript...
Twitter: / openjavascript

Опубликовано:

28 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 110

@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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-47n53M3U4WA.htmlm20s

@castro4694 10 месяцев назад

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 :)

@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!

@SyriousMedia 11 месяцев назад

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!

@LordKraken3 4 месяца назад

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

@chinnyi2384 14 дней назад

this was exactly what i needed THANK YOUU 🙏

@andrews13 Год назад

This is an underrated channel!

@OpenJavaScript Год назад

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

@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!

@jzurgegarcia7107 2 года назад

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 2 года назад

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

@jzurgegarcia7107 2 года назад

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

@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 :)

@jitendrapuri Год назад

very articulate and well explained. Thank you.

@OpenJavaScript Год назад

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

@deepthikundanagurthi7203 2 года назад

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

@OpenJavaScript 2 года назад

I'm glad you found it useful!

@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!

@CRCE__Lionel_Castelino Год назад

thankyou ! this video helped me in my project

@OpenJavaScript Год назад

You're welcome, glad it helped!

@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 :)

@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!

@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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-mtuYmm2ITvI.html And here's how you can implement such a server via a shared hosting account via cPanel: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-emDCYo5Rz0E.html

@wifi779 9 месяцев назад

Great Vedio , thank you

@EstherBose-wy4tc 3 месяца назад

THANK YOUUUUUUUUUUUUUUUUUUUUU

@EWeaponsLab Месяц назад

Thanks 🎉

@Im_Pranav Год назад

Amazing the exact video i was searching for 🙏

@OpenJavaScript Год назад

That's great, glad it helped you!

@NaVindu0315 Год назад

jst what i was searching for thanks a lot

@OpenJavaScript Год назад

Always nice to hear that and you're welcome!

@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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE--ZRDZyUjEEI.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).

@grejs6832 7 месяцев назад

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

@whoass Год назад

Saved!

@OpenJavaScript Год назад

Great :)

@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

@prasunbiswas1790 8 месяцев назад

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

@feitan7712 7 месяцев назад

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

@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.

@hackerlurcker8675 3 месяца назад

thankkkkkkkkk uu smmmmuch im soooooooooooooooooooooooooooooooo hapyyyyyyyyyyypyyppyppp

@MrBenske4 Год назад

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

@vinces.9148 2 года назад

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 2 года назад

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!

@Lipunya Год назад

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

@OpenJavaScript Год назад

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

@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 :)

@tomislavbusic2652 Год назад

Thank you!!!!

@OpenJavaScript Год назад

You're welcome. Thanks for watching!

@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 ;)

@asdffasdf3234 2 года назад

thank you very much sir thank you again

@OpenJavaScript 2 года назад

You're welcome :)

@yasirmohammedali Год назад

hi ... thank you

@OpenJavaScript Год назад

You are welcome!

@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.

@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): ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-XZ8CjU9eaVA.html

@denichasinthabag Год назад

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

@OpenJavaScript Год назад

@@denichasinthabag Great!

@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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-dFG2ikJr4U8.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.

@julietferreira9031 Год назад

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

@OpenJavaScript Год назад

Glad you found this useful!

@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))

@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.

@user-rv2dj3cd3g 9 месяцев назад

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

@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/

@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

@anandsnair7409 2 года назад

thank you can you share the file pls

@OpenJavaScript 2 года назад

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/

@nokee092life4 7 месяцев назад

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.