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

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.

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.