When we talk about Storage, Database will strike our mind.
Oops, if its Browser Specific then one and only Cookies will flash our eyes who preserve data in browser. This Article wakes up the one who wanted to learn more about Storage API (Local and Session Storage).
Why we need to Store data in browser ?
The Good User interface is preserve user data without redundancy which means requesting for the same user data repeatedly from the user is not a good practice.
Simple Example: Typical Search Page have keyword input, after user didn’t get proper result. Search result page should have entered keyword data to continue the search.
Basically centralize the data and make it available for all the pages on particular domain.
What wrong in Cookies to have Storage API?
There is nothing wrong in Cookies. Storage API introduced for different purpose, where cookies can be read by server-side, local storage can only be read by client-side.
Storage API
Storage API is an Interface provide access to localStorage and sessionStorage. API introduced mainly to handle multiple transactions in different windows where cookies does it for single transactions.
Below is the Storage API Interface.
interface Storage {
readonly attribute unsigned long length;
DOMString? key(unsigned long index);
getter DOMString? getItem(DOMString key);
setter void setItem(DOMString key, DOMString value);
deleter void removeItem(DOMString key);
void clear();
};What is lifetime of Storage?
There is no option to set expiration time. removeItem and clear Methods are available for removing the attributes.
session storage data gets cleared when the page session ends.
// In Local Storage
localStorage.setItem('name', 'value');
localStorage.clear();// In Session Storage
sessionStorage.setItem('name', 'value');
sessionStorage.removeItem('name');
Is Local Storage / Session Storage support prototyping?
No, It is not supported. Both are Instance which is implemented from Storage API. so Storage API supports prototyping. Have a look at the below code snippet.
How to do exist check for localStorage / sessionStorage items?
There is no native method to do exist check for localStorage/SessionStorage, where getItem return only null for non-exist items.
What is difference between local and session storage?
localStorage data has no expiration set but sessionStorage gets cleared when the page closed (session ends).
How to check the number of items in local / session storage?
Only way is length property which is available in both objects. Take a look at below snippet.
// In Local Storage
localStorage.setItem('name', 'value');
localStorage.length;// In Session Storage
sessionStorage.setItem('name', 'value');
sessionStorage.length;
How to listen for changes?
Methods available to listen for changes during storage method calls() like removeItem() and setItem(). There is one limitation is only listen to other tabs item changes.
[Constructor(DOMString type, optional StorageEventInit eventInitDict)]
interface StorageEvent : Event {
readonly attribute DOMString? key;
readonly attribute DOMString? oldValue;
readonly attribute DOMString? newValue;
readonly attribute DOMString url;
readonly attribute Storage? storageArea;
};
dictionary StorageEventInit : EventInit {
DOMString? key;
DOMString? oldValue;
DOMString? newValue;
DOMString url;
Storage? storageArea;
};What is the disk space limit?
Disk space is browser specific.
Mobile Browser: (Chrome: 10MB, Android: 2MB, Firefox: 10MB, IOS Safari: 5MB)
Desktop Browser: (Chrome: 10MB, Opera: 10MB, Firefox: 10MB, Safari: 5MB, IE: 10MB)
How to see existing Storage items in Run Time ?
There is no native method to see all but combination of existing property length and methods of key and getItem. Take a look at the below code snippet.
How to check Storage Support in browser?
There is many ways to check. Have a look at the below code snippet.
(typeof(Storage) !== "undefined");
(typeof(localStorage) !== "undefined");
(typeof(sessionStorage) !== "undefined");(typeof(window.Storage) !== "undefined");
(typeof(window.localStorage) !== "undefined");
(typeof(window.sessionStorage) !== "undefined");
Disadvantages of Storage / LocalStorage ?
1. It stores on hard drive.
2. localStorage is synchronous in nature, meaning when it loads it can block the main document from rendering.
3. localStorage is persistent. Not using a service or never visit a web site again, the data is still loaded when its browser started every time.
Source: https://hacks.mozilla.org/2012/03/there-is-no-simple-solution-for-local-storage/
Happy Reading, Have a look at the below Articles where I have taken Reference:
https://www.w3.org/TR/webstorage/#the-storageevent-interface
https://developer.mozilla.org/en-US/docs/Web/API/Storage
https://www.sitepoint.com/html5-local-storage-revisited/
https://html.spec.whatwg.org/multipage/webstorage.html
http://html5demos.com/storage-events
Interesting Question which you wanted to aware and answer:
stackoverflow.com/questions/2989284/what-is-the-max-size-of-localstorage-values
stackoverflow.com/questions/3220660/local-storage-vs-cookies
