Javascript session image switching

[AmmO]

I have a site where i switch between two images using some JavaScript. What I need is to be able to set a session variable or something so that if someone selects shading on or off it sticks to that for the rest of the session.

Any idea or even a point in the right direction. Do i need cookies or is there a simple way to do this


http://www.tech4t.co.uk/territorymapping/pentagon/

[ironboy]

I wrote this a while ago (an alternative to session cookies):
http://www.thomasfrank.se/sessionvars.html

Basically you can just use the name property of the window object (the link above is just to a fancy wrapper for this):

// somewhere in your code when the user chooses a shade on img1
window.name += "#shadeOn1#";

// somewhere nearby when the user wants to switch off the shading on img1
window.name = window.name.split('#shadeOn1#').join('');

// somewhere else in your code even after page switching / page reload
if(window.name.indexOf('#shadeOn1#')>=0){
  // apply shade
};

[DaveyErwin]

Originally Posted by ironboy

I wrote this a while ago (an alternative to session cookies):
http://www.thomasfrank.se/sessionvars.html

Basically you can just use the name property of the window object (the link above is just to a fancy wrapper for this):

// somewhere in your code when the user chooses a shade on img1
window.name += "#shadeOn1#";

// somewhere nearby when the user wants to switch off the shading on img1
window.name = window.name.split('#shadeOn1#').join('');

// somewhere else in your code even after page switching / page reload
if(window.name.indexOf('#shadeOn1#')>=0){
  // apply shade
};

This doecn't work if user selects
"open in new window"
better to use cookies or query string

[ironboy]

@DaveyErwin:
Depends on how much info you want to save, yes in this case a cookie would probably be better - but cookies can not store that much info and some corporate firewalls will cut off requests when the request header reaches a certain length (and cookies are part of the request header...)

[blaze4218]

@ironboy that may be so, but your hijacking a property that wasn't designed for this purpose... What happens when everyone starts using this? Would performance, or cross scripting issues arise?

[ironboy]

Been hijacking it for years. Seems stable Can only hold 2MB of data in Opera, much more in other browsers...
Is totally cross-domain though and should not be used for sensitive data.

But I agree with you: There are several more well defined possibilites for offlline storage (but as oftimes not very cross-browserish if you want to support IE). The best choice is a good library to mitigate browser differences like:
http://www.jstorage.info/

Also (off-topic) ran across this rather scary library that exposes just how many ways we can store persistant user data:
http://samy.pl/evercookie/

[blaze4218]

[Philip M]

To revert to the question, yes, you should best use a cookie. You can also use the window.name trick as offered by ironboy. Window.name persists until the window is closed, but as Da\veyErwin points out this doesn't work if the user selects "open in new window". So prefer to use a cookie. And be sure not to store sensitive data in window.name because it will also be accessible by other sites that will be loaded in the same window.


All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

[AmmO]

Ok so I need cookies to do it properly then. Ironboy I might take your suggestion on. It seems to be fit for purpose the client wants it to persist in their session but thats it.

Any good cookie tutorials outthere mate

[Philip M]

Originally Posted by AmmO

Any good cookie tutorials outthere mate

Cookies have been covered in this forum a zillion times. Try using the Search feature. Or Google.

[ironboy]

PPK:s tutorial is concise:
http://www.quirksmode.org/js/cookies.html

[AmmO]

Ok thanks for the help people.

Question Ironboy is #shadeone1# supposed to be the JavaScript function i used to switch the images around?

[ironboy]

@AmmO: No it's just a flag (arbitrary name) that you can set and get.
Depending on if it is set you could call different functions or the same function with different inparameters...

[AmmO]

OK In understand its just a way to store a variable across a browser session that can be used for selecting which function fire.

OK I think I get it. I will have a crack at doing this.

Thanks for the help guys