HTML5 | LocalStorage

HTML5 LocalStorage a feature that's been added to HTML5 specification, which enables storing data on clients machine, which can be retrieved and manipulated for future use unless the user clears the cache from browsers.

Though we can store data there is a limitation as in how much we can store, the current max size of storing is 5Mb, which is quite a big amount, lets look how to store  and retrieve data on client's machine

Storing data:
To store data we use the native localStorage.setItem(key,value) method which expects two arguments as shown the key and the value like so:
localStorage.setItem('user_name','purush');

Retrieving Data:
To Retrieve data we use the native localStorage.getItem(key) method which expects one argument as shown which is the key, lets retrieve the previously stored data
localStorage.getItem('user_name');
this will return 'purush'

Clearing Data:
To remove or clear stored data we can use either localStorage.removeItem(key) to remove single storage element or we can use the localStorage.clear() to remove all references of storage like so

localStorage.removeItem('user_name'); // to remove single reference;

localStorage.clear();//to clear all references in storage



Additional functions/methods for storage manipulation

localStorage.length; // to get count of all stored references
localStorage.key(0); // to retrieve stored references expects a index to be passed as argument
window.onStorage();  // event thats triggered while saving 


Advantages of LocalStorage
1.Enables us to serve relevant content to users based on their previous visit.
2. Enables to save a state for a example a game level where users can continue playing from recent state.


Drawbacks of localStorage

1.Doesn't work on IE7 but can be made to work using shim or polyfills.
2.If the user clears the cache the data is lost.
3.Requires a domain name for localStorage to work properly.




Comments

Post a Comment

Thanks for Visiting for any questions or suggestions please comment below
Cheers,

Check out

CSS Sprites | What are They?

Login form | Using CSS3

Remove Scrollbars from syntaxhighlighter

Adding a button in HTML | styling a button

HTML5 Semantic Tags | What do they mean

How to remove plus and minus characters from input type number

jQuery Resources | Support and tutorial help

How CSS3 Works