在javascript中的html文件之间交换变量

Question

I am trying to share variables between two html pages. I am only using javascript and HTML5 to develop a windows 8 app. Based on an image which a user clicks on one page, I want a div on a second page to be populated with that image. Any ideas?

When I click on the image, I am currently calling the following function:

function imageClick(url) {
             //var id = parsed.ClientID;
             //window.location= url + "?" + id
             window.location = url;
         }

Then in my html file, I have this line:

<img onclick="imageClick('pages/page2/page2.html')" 
data-win-bind="src:image" style="width: 133px; height: 125.5px;"> 

I was thinking of getting that id in the next page's url (if I were to uncomment the commented lines above) but it's a bit hackky and I don't actually know how to go about executing the retrieval of that on the next page..

Is there a more efficient and easy way of doing this in javascript? Like an equivalent of sessions in php or something?

Answer 1

Add the link to the image to the query part of the url when they click. Something like you had in the comment, assuming you don't have a query part already:

function imageClick(url) {
         //var id = parsed.ClientID;
         window.location= url + "?src=" + url.src;
         //window.location = url;
     }

The other page can use window.location.search to extract it, strip off the src= . The code would look something like this:

var src = window.location.search;
if (src.indexOf("src=") == 0) {
    src = src.substring(4);
}
newPageImageElement.src = src;

Where newPageImageElement is the <img> where you want to display the picture on the second page.

Answer 2

Javascript does not have session variables because it runs on the client side. You can use URL parameters and cookies in order to achieve the same results.

You can get the URL parameter by using this function:

http://ziemecki.net/content/javascript-parsing-url-parameters