@@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 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: th-cam.com/video/47n53M3U4WA/w-d-xo.htmlm20s
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
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.
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!
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
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!
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 :)
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?
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.
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: th-cam.com/video/mtuYmm2ITvI/w-d-xo.html And here's how you can implement such a server via a shared hosting account via cPanel: th-cam.com/video/emDCYo5Rz0E/w-d-xo.html
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.
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).
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: th-cam.com/video/-ZRDZyUjEEI/w-d-xo.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).
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.
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!)
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
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!
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!
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
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
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
I managed to get it to work with a constant declaration (const data = JSON.parse(...)), and then changing document.getElementByID("...").textContent = data.fn
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
@@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)
@@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).
@@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.
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))
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.
Yes, for that you'll want to do what I do in this tutorial: th-cam.com/video/dFG2ikJr4U8/w-d-xo.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.
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.
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.
Thanks for watching!
👉 Code for this tutorial: openjavascript.info/2022/06/09/pass-data-from-one-html-page-to-another/
You dont need line 26, simply call the form as its id, no need for getelementbyid.
@@dgh25 Have to select the form somehow. What solution do you have in mind?
@@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.)
Why does the preventdefault function work internally but not externally
@@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: th-cam.com/video/47n53M3U4WA/w-d-xo.htmlm20s
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
Did you got the intership?
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.
You are welcome, glad you found it useful :)
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.
Been there myself a few times 😂
So glad to hear the tutorial was able to help you out!
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!
This was exactly the tutorial I'm looking for to complete a project for my Web Design class; thank you so much!
This is an underrated channel!
Thank you, I'm glad you like the content, I'll try to keep it coming :)
I FREAKING LOVE YOU, YOU SAVED ME BRO
Glad I could help!
I'm Very thankful that you have made this tutorial. Helped me out a lot :)
That's great! Glad this helped you out :)
very articulate and well explained. Thank you.
Thank you, I'm glad you found it useful!
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
I was asked a similar question in one of the other comments...so I think I should do this. Coming soon!
@@OpenJavaScript please do this master. hope very soon😄
this was exactly what i needed THANK YOUU 🙏
Thank you very much. This is what I exactly need.
Finally found the solution , trying to do it from 2 days, thanks for the effort
I'm glad you found it useful!
So Good So Thank you for this video I would suck without this video
Haha I'm not that's not true. Thanks though!
thankyou !
this video helped me in my project
You're welcome, glad it helped!
this helped me to finally understand it!!
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!
a tremendous help to me. I like your video a lot. Hope that you'll post more videos.
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 :)
I know session and local storage exists but was wasted unit this video. 😆Thank you.
Glad you found this useful! Thanks for reaching out :)
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?
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.
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:
th-cam.com/video/mtuYmm2ITvI/w-d-xo.html
And here's how you can implement such a server via a shared hosting account via cPanel:
th-cam.com/video/emDCYo5Rz0E/w-d-xo.html
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.
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).
@@OpenJavaScript Well, okay then. lol Thank you
Amazing the exact video i was searching for 🙏
That's great, glad it helped you!
Thanks for the vid. It's helpful, but is this the most efficient and easiest way to store variables with JS?
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: th-cam.com/video/-ZRDZyUjEEI/w-d-xo.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).
jst what i was searching for thanks a lot
Always nice to hear that and you're welcome!
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.
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!)
@@OpenJavaScript and displaying the result in the next page like you did for the first example. Thanks for taking the time to respond :)
@@ByzaOCE Thank you for the feedback! Appreciated.
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
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!
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!
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
can you write an example with checkbox and radiobutton plz!!!
I will include more examples with these in my future videos :)
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
do have video for retrieved data from database like firebase?
Unfortunately not yet...but I will keep it in mind for a future tutorial ;)
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
I managed to get it to work with a constant declaration (const data = JSON.parse(...)), and then changing document.getElementByID("...").textContent = data.fn
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
@@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)
@@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).
@@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.
Thanks!
Great Vedio , thank you
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
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))
How can I tranfer image I tried everything and I always get default image and in console it says src null
Try this tutorial (saving an image to localSotrage):
th-cam.com/video/XZ8CjU9eaVA/w-d-xo.html
@@OpenJavaScript I looked and changed my code and it works , thanks !
@@denichasinthabag Great!
sir how about html page to php page? can u make a video about it? thanks
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.
@@OpenJavaScript Okay, Thanks
THANK YOUUUUUUUUUUUUUUUUUUUUU
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 ?
Yes, for that you'll want to do what I do in this tutorial: th-cam.com/video/dFG2ikJr4U8/w-d-xo.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.
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.
I am getting an error in the log saying , Cannot read properties of undefined (reading addEventListener) . What can I do???
having the same problem
Thanks god i found you
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 :)
can you please post somewhere the hole code pleasee?
Here you go: openjavascript.info/2022/06/09/pass-data-from-one-html-page-to-another/
Thank you!!!!
You're welcome. Thanks for watching!
thank you very much sir thank you again
You're welcome :)
Thanks 🎉
Thank you soooo muchh!!!!!!!!
Glad you found this useful!
does this work in cshtml as well? (don't laugh if it seems like a stupid question please) :)
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.
thankkkkkkkkk uu smmmmuch im soooooooooooooooooooooooooooooooo hapyyyyyyyyyyypyyppyppp
thank you can you share the file pls
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/
hi ... thank you
You are welcome!
Wow
❤❤❤❤❤❤
❤❤❤:)
Please use an external keyboard for your videos, the hammering on the keys steals attention from your otherwise great content.
• never trust a nerd to explain simple shit online