JavaScript / Programmings

Getting Started with Local Storage

Overview

There are of different ways to store data from website into your local machine, more specifically in your browsers. Most commonly used and traditional way is store data into cookies.

There is some limitations and drawbacks are there when using cookies, some of them are,

  • Cookies are limited to about 4 KB of data.
  • No Security for Sensitive Data.
  • Cookies are send along with every HTTP Request, it slows down your application by sending same data over and over needlessly.
  • Most browsers allow only 20 cookies per site; if you try to store more, the oldest cookies are discarded.
  • Because cookies have been used to spy on people’s surfing behavior, security-conscious people and companies turn them off or request to be asked every time whether a cookie should be set.

So if we want to store large amount of data (Up to 5 MB), we can depend on HTML5 Local Storage. It avoids all the above mentioned problems of cookies. Local storage are domain specific. Data stored in domain abc.com will not be available in xyz.com. There is also another type of Local Storage is available, ‘Session Storage’. Both are also referred as HTML5 Storage.

Local Storage

  • Data persist even after browser is closed.
  • Data is shared across all pages in the same domain.

Session Storage

  • Data available as long as tab/window is open.
  • Data available only to tab/window it set.

Both Local Storage and Session Storage Objects have same methods to store and retrieve data. Now we look how to store and retrieve data with Local Storage Object. If you want Session Storage replace Local Storage with Session Storage.

Working with Local Storage

  • All you have to do is modify the JavaScript Local Storage Object.
  • You can only store string in different keys, that you cannot store object directly into local storage. Convert it to JSON String and store. when retrieving parse string to Object.
  1. Set Data into Local Storge
    localStorage.setItem('name', 'safeer');
  2. Retrieve Data From Local Storage
    var name = localStorage.getItem('name');
    console.log(name);
  3. Remove Data From Local Storage
    localStorage.removeItem('name');
  4. Clear Local Storage
    localStorage.clear();

Local Storage with Objects

Cannot store object directly into local storage. Follow these steps when working with objects in Local Storage.

  1. Convert Object Into JSON String.
  2. Set JSON string to key in Local Storage.
  3. Retrieve Using Key.
  4. Parse into Object.

Storing Objects to Local Storage


var person = {};
person.name= 'safeer';
person.age= 25;
console.log( person); // log Object in Console
localStorage.setItem( 'person', JSON.stringify(person) ); //Setting JSON String of Object in Local Storage

Retrieving Objects

 console.log( JSON.parse( localStorage.getItem( 'person' ) ) ); // Getting Object From JSON String and Log 

Working with Session Storage

If you want to use Session Storage, replace localStorage Object With sessionStorage
like

sessionStorage.setItem('name', 'safeer');
var name = sessionStorage.getItem('name');
console.log(name);

Let’s share our knowledge and experience. Thanks!

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s