Local Storage in HTML5 with demo
- The local storage is same as session storage, except the feature of persistency.
- Local storage can be said as persistent version of sessionStorage object.
- The sessionStorage stores the data till the duration of a browser tab session, while the local storage stores the saved data on a user's computer even after closing the browser window.
Comparing with cookies
Cookies indeed can be used for persistent local storage of small amounts of data. They have following downsides:
- Cookies are included with every HTTP request, thereby slowing down the web application by needlessly transmitting the same data again and again.
- Cookies are included with every HTTP request, thereby sending data unencrypted over the internet (unless your application is served over SSL).
- Cookies are limited to about 4KB of data, not enough to use for large data.
What Local storage provides
- A lot of storage space on client.
- The data stored persist beyond a page refresh.
- The data stored using local storage is not transmitted to the server.
- getItem(key) - Returns a value on the basis of a specified key from the DOM storage area. If the key does not exist null is returned.
- setItem(key,value) - Stores a string value along with a specified key inside the DOM storage area.
- removeItem(key) - Removes a value on the basis of a specified key inside the DOM storage area.
- key(index) - Returns the key of a value at the specified index.
- clear() - Clears all data from the DOM storage area.
Below is the example for each storage API:
localStorage.setItem("Name", "Thierry Henry"); // Store an string with the name "Name"
localStorage.getItem("Name"); // Retrieve a value
// Enumerate all stored name/value pairs
for(var i = 0; i < localStorage.length; i++) { // Length gives the # of pairs
var name = localStorage.key(i); // Get the name of pair i
var value = localStorage.getItem(name); // Get the value of that pair
}
localStorage.removeItem("Name"); // Delete the item "Name"
localStorage.clear(); // Delete all keys from storage
var count = localStorage.length; // Gets the count of key-value pairs present in localStorage
Storage Events
Whenever the data stored in localStorage or sessionStorage changes, the browser triggers a storage event on any other Window objects to which that data is visible (but not on the window that made the change). If a browser has two tabs open to pages with the same origin, and one of those pages stores a value in localStorage, the other tab will receive a storage event. Remember that localStorage is scoped to the top-level window, so storage events are only triggered for localStorage changes when there are frames involved. Also note that storage events are only triggered when storage actually changes. Setting an existing stored item to its current value does not trigger an event, nor does removing an item that does not exist in storage.
Register a handler for storage events with addEventListener() (or attachEvent() in IE). In most browsers, you can also set the onstorage property of the Window object, but at the time of this writing, Firefox does not support that property.
The event object associated with a storage event has five important properties (they are not supported by IE8, unfortunately):
Whenever the data stored in localStorage or sessionStorage changes, the browser triggers a storage event on any other Window objects to which that data is visible (but not on the window that made the change). If a browser has two tabs open to pages with the same origin, and one of those pages stores a value in localStorage, the other tab will receive a storage event. Remember that localStorage is scoped to the top-level window, so storage events are only triggered for localStorage changes when there are frames involved. Also note that storage events are only triggered when storage actually changes. Setting an existing stored item to its current value does not trigger an event, nor does removing an item that does not exist in storage.
Register a handler for storage events with addEventListener() (or attachEvent() in IE). In most browsers, you can also set the onstorage property of the Window object, but at the time of this writing, Firefox does not support that property.
The event object associated with a storage event has five important properties (they are not supported by IE8, unfortunately):
- key - The name or key of the item that was set or removed. If the clear() method was called, this property will be null.
- newValue - Holds the new value of the item, or null if removeItem() was called.
- oldValue - Holds the old value of an existing item that changed or was deleted, or null if a new item was inserted.
- storageArea - This property will equal either the localStorage or the sessionStorage property of the target Window object.
- url - The URL (as a string) of the document whose script made this storage change.
Avoid below with Local Storage
The local storage access is synchronous.The operations like JSON.parse or JSPN.stringify takes time which could slow donw your site.
The local storage access is synchronous.The operations like JSON.parse or JSPN.stringify takes time which could slow donw your site.
- Avoid serializing unnecessarily .
- Do not use excessive keys.
- Do not use excessive gets and sets.
- Do not block the UI.
