Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

When should I use html5 sessionStorage?

Tags:

I've learned difference between sessionStorage (persist during session) and localStorage (persist forever if not deleted).

I can see that localStorage can be used as better version of cookie. (more size, not traveling to server for each HTTP request like cookie does).

But for sessionStorage, I'm thinking when should I use it effectively?

I thought about user inputs into text fields in pageA and then moves onto pageB within the same tab or browser window, pageB can look up sessionStorage.

I can't really expand my guess more than the scenario above. Could anyone tell me how can sessionStorage be used?

like image 863
Meow Avatar asked Dec 14 '11 00:12

Meow


People also ask

When should I use sessionStorage?

Session storage is a popular choice when it comes to storing data on a browser. It enables developers to save and retrieve different values. Unlike local storage, session storage only keeps data for a particular session. The data is cleared once the user closes the browser window.

When should I use localStorage and sessionStorage?

sessionStorage is similar to localStorage ; the difference is that while data in localStorage doesn't expire, data in sessionStorage is cleared when the page session ends. Whenever a document is loaded in a particular tab in the browser, a unique page session gets created and assigned to that particular tab.

Should I use session or local storage?

localStorage and sessionStorage are almost identical and have the same API. The difference is that with sessionStorage , the data is persisted only until the window or tab is closed. With localStorage , the data is persisted until the user manually clears the browser cache or until your web app clears the data.

What's the main advantage of using HTML5 local storage and session stores over the cookie?

Web storage such as Local Storage and Session storage were introduced with HTML5. This made storing and retrieving data in browsers much easier, and one of the major improvements made with these in client-side storage was the storage size, which is much better than cookies.


1 Answers

With ajax-driven dynamic interfaces, a lot of times there is nothing storing the current state of how the interface looks (like which tab is selected, for example). sessionStorage could be used to store the state of the interface, so when coming back to a page, you can restore the screen the way the user was looking at it.

Another use would be if several pages deep you are working on a single object, you could store the id like a global variable: currentInvoiceId.

User settings that are needed on every page, like a special layout or template, could be loaded once up front and put into sessionStorage for easy access.

Some things you only want the user to see once per login, like a news popup. You could store that they've seen it already in sessionStorage. This would also work for actions that you only want the user to do once per login.

It's a good alternative to passing data between pages using viewstate, hidden <input> fields, or URL parameters.

like image 78
ThinkingStiff Avatar answered Sep 24 '22 14:09

ThinkingStiff