Ajax Loader
×

Storing Data Client-Side with LocalStorage and SessionStorage

Today we're going to learn about two dead simple Web Storage APIs - localStorage and sessionStorage. Using these, you can store data on the client-side and use it for various purposes. To some extent it can help provide offline access of your app to the users. It can also help save additional server requests by fetching data from the client-side.

This codecast is going to show localStorage examples but note that both local and session storage have exactly same API. So whatever function calls you see with localStorage can be applied to sessionStorage too!

You might be wondering that, what is the difference between the two ?

Ok, so, The data stored in localStorage is going to be accessible across all open browser tabs and windows on the same origin.

While the data stored in sessionStorage only persist through that particular session. A new session is initiated when you open a webpage in a new tab or window. It lasts as long as the tab is open and survives over page reloads or "restore". A single session is tied to a tab or browser window. It doesn't shares with other tabs or windows either on same or different origin.

All the session and local storage data are tied to the same origin.

What is same origin ?

2 URLs with the same protocol (http or https), same host (cssdeck.com) and the same port (80 or 8080 or 1234) are said to be of the same origin.

Let's get started by watching the codecast now!

Spec URL: http://dev.w3.org/html5/webstorage/#storage

Related:


    Warning: Invalid argument supplied for foreach() in /var/www/cssdeck.com/app/modules/labs/views/_details.php on line 68
×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    Storing Data Client-Side with LocalStorage and SessionStorage

    CSSDeck G+