HTML 5 - sessionStorage - values overlap across pages in same domain

Question

Are the session values stored based on site or is it based on a page?

I am storing some values in the sessionStorage across two pages in the same domain like example.com/page1 and example.com/page2. Now when I change the values in one page, it somehow overlaps or affects the value on the other page. I am switching between pg1 and pg2 in the one browser, single tab. And the key names are same on both the pages. It wouldnt be very difficult for me to create new keys for page 2, but trying to figure out why this is so. My env is Safari on Mac.

Also, another question, can we create session variables for the entierity of the site and not just by page? Some times i would like to store some values from one page and need to check for its values across all pages in that site, as long as the user is in session.

Thanks!

Answer 1

Session storage is designed to be accessed from any page on the same domain, which is why the value of the variable is the same across both pages.  Though it is only for that particular window or tab.

Reference: http://dev.w3.org/html5/webstorage/#introduction

Answer 2

You could also define a second sessionStorage key so that you have two completely different instances of sessionStorage. SessionStorage is across the entire site, but only within one tab/window.

Might also be helpful to look at the difference between localStorage and sessionStorage: HTML5 Local storage vs. Session storage