HTML5 session storage send to server

Question

If I'm right, Session Storage is stored client side and is accessible only for one tab.

How can I send information stored in the session storage to the server ? I can use cookie for that, but if I open 2 tabs, the cookie will be rewrite by the second tab.

Thanks

Screening

ajax requests come to mind. – Jenifer

Answer 1

The Storage object (both localStorage and sessionStorage) is available from all tabs having the same page open.

However (some comment state this is not correct, but this is a misinterpretation of the documentation), when you open a new tab a new storage object is created internally. This is a clone of the first one so the content at that point is the same.

They are treated separate from that point, but you synchronize them by listening to the storage event in your code.

From http://dev.w3.org/html5/webstorage/#the-sessionstorage-attribute: (note that the specs are addressing the implementers)

When a new top-level browsing context is created by cloning an existing browsing context, the new browsing context must start with the same session storage areas as the original, but the two sets must from that point on be considered separate, not affecting each other in any way. [...] When the setItem(), removeItem(), and clear() methods are called on a Storage object x that is associated with a session storage area [...], then for every Document object whose Window object's sessionStorage attribute's Storage object is associated with the same storage area, other than x, send a storage notification.

That is to say that when a storage is modified in the active tab, a storage event is sent to all the other tabs (for the same origin) - but not the active tab which of course isn't needed as this is the one being modified.

Use the event to read the key and newValue fields to update the localSession in the currently inactive tab(s) (there is also the oldValue on the event). The storageArea contains the Storage object that is affected (useful if you use both local and session storage).

As to "one domain" - yes, the same data will only be available to the same origin (scheme, domain and port).

Sending the data to server is fully possible. Everything stored in Storage (session and local) is stored as a string. I would recommend encoding it though (JSON is not necessary as it is already stored as a string). Use f.ex:

var dataForServer = encodeURIComponent(sessionStorage.getItem(myKey));

Then send it as part of a form, url or by ajax.

Inhumanity

Answer 2

sessionStorage is available for 1 domain, not 1 tab. So you set information on a page in one tab and you can read it out in the second. Sorry, I thought it worked like this. But it doesn't, you need localStorage or cookies for this to work.

So storing it in a cookie is a viable option, but if you do that, why are you even using sessionStorage?

You could also send the contents of sessionStorage to the server through Ajax, (though you'd have to convert the data to json since you can only send strings)

But if you save information on the server anyway, why are you using sessionStorage? The whole point of localStorage and sessionStorage is to save user-specific information the server doesn't have to know about.

Behaviorism

sessionStorage is available for 1 domain, not 1 tab — Not true: See developer.mozilla.org/en-US/docs/Web/Guide/DOM/… — This is a global object (sessionStorage) that maintains a storage area that's available for the duration of the page session. A page session lasts for as long as the browser is open and survives over page reloads and restores. Opening a page in a new tab or window will cause a new session to be initiated. – Allargando

I stand corrected, I thought it would use the same session if there were two or more tabs open of the same page. I just tried and this is not the case. – Behaviorism