Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript Foundations Arrays Methods: Part 3

Jorge Guzman
PLUS
Jorge Guzman
Courses Plus Student 21,390 Points
Posted by Jorge Guzman
Jorge Guzman
Courses Plus Student 21,390 Points

Passing data between web pages

Hi guys,

Does anybody know how to pass a variable, an array and an image from one page to another?.

I tried with <a data-key="value" href=...> and then retrieving with $selector.data("key"), but it only works in the same page, but it does not pass the data to the destination page.

I tried with parameters, but doesn't work either: <a href...&key=value>.

Hope you can help.

Cheers!,

Jorge

6 Answers

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

Easiest way I can think of is to do it server side. You can send data with Javascript or jQuery to the server, and than do something with that data on the next page by sending it back.

The only way I can think of doing it without going server side would be with something like Local Storage on the browser, or maybe cookies.

Jorge Guzman
PLUS
Jorge Guzman
Courses Plus Student 21,390 Points
Jorge Guzman
Jorge Guzman
Courses Plus Student 21,390 Points

Hi Kevin,

Thanks for your comments. Do you think Local Storage will work in browsers of mobile devices?.

Andrew Kiernan
Andrew Kiernan
26,892 Points
Andrew Kiernan
Andrew Kiernan
26,892 Points

Hey Jorge!

Just to be sure, you are looking to pass data you pull from one page and make it available on another page after a page reload right?

As far as I know, you will need the LocalStorage api for this. This is because when the page reloads, all of your scripts reload too, and all data/variables are gone.

You would grab the data from page1, store it in LocalStorage, load page2, then pull the value from LocalStorage where you can now use it on page2. Google "MDN LocalStorage" (Mozilla's Developer Network) for more information on how to go about doing that.

Hope that helps! Let me know if you have any questions. -Andrew

Andrew Kiernan
Andrew Kiernan
26,892 Points
Andrew Kiernan
Andrew Kiernan
26,892 Points

I see you guys hashed that out while I typed this. Don't mind me... >.>

christopher smith
christopher smith
5,831 Points
christopher smith
christopher smith
5,831 Points

You know what might also work is using cookies to store a variable and they do work in mobile browsers. For example I have an ASP table for customers to view their inventory that is filtered based off of their location. When my customer logs in I create a cookie that has their location so when they view the ASP table, the data is specific to them.

As for the image, I don't think you pass the image. Just base it off the variable you passed. So if I'm location CA, then when I recall the cookie, I display an image for location CA.

Jorge Guzman
PLUS
Jorge Guzman
Courses Plus Student 21,390 Points
Jorge Guzman
Jorge Guzman
Courses Plus Student 21,390 Points

Hi guys,

Many thanks for your guidance. For my purpose and my knowledge level (beginner), finally I got it with localStorage.

Have a great week!!