Web Local Storage

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

Local storage is a HTML5 specification and rather self explanatory, lets look what makes it a special feature for web developers.

Predecessors

Cache and Cookies are common phrases across browsers, caching is mainly focused on speed of the browsers by storing bits of data whereas cookies are focused on tracking user data both ensured to give better user experience. Thus both differ in the manner and purpose they are stored.

Hence we got cache and cookie doesn't mean local storage is obsolete, thus these got different purpose.

Cookies mainly store the server-side data i.e; maximum upto 4KB, where as local storage is for client-side data and upto 5MB.

So, What exactly is Local Storage?

Local storage resembles that of a session storage, were the data is stored for a session until the tab is closed and escapes all refresh and reload.

Whereas local storage dominates session storage as;

  • Client side data is stored permanently.
  • Upto 5MB of storage locally.
  • Ease of implementation.

Implementation

localstorage.gif

Data is stored as Key-Value pairs is the document Object of the browsers.

yourBrowserStorage=window.localStorage;      // invoke function

Data manipulation is done by;

  1. setItem(); Sets a key-value pair to your localstorage
  2. getItem(); retrieve value
  3. removeItem(); remove item by key
  4. clear(); clear all
  5. key(); access specific key

Since data flows across network as JSON format, we come across;

JSON.stringify();       /* convert JavaScript objects to native JSON format */
JSON.parse();           /* convert JSON strings to JavaScript Objects */

Other than the javascript objects the mechanism is straight forward.

setItem()

Its rather self explanatory as we add a key-value pair to the localstorage. Adding data other that objects is easy and straight forward.

localStorage.setItem('browser','Firefox');    /*adding a simple string*/

let browsers=[
   {
   name:"chrome",
   version:"30.01.1000"
   },{
   name:"firefox",
   version:"80.0.1"
   }
];                                    /*array of objects*/
localStorage.setItem('array',JSON.stringify(array));    /*objects converted to JSON strings*/

getItem()

Retrieve data from local storage.

localStorage.getItem('browser');    /*retrieving a simple string*/
                                       // returns: "FireFox"

JSON.parse(localStorage.getItem('browsers'));   /*retrieve an JS object(array)*/
                                     //returns

key()

Get's the key for specified value.

localStorage.key(chrome);       /*returns "browser"*/

removeItem()

Remove a single item using the key.

localStorage.removeItem('browser');            /*variable browser is removed*/

clear()

Completely removes all the data stored earlier

localStorage.clear(); /local storage is empty/

Limitations

  • Not that safe can be accessed by anyone using the browser
  • Can't store sensitive data.
  • Synchronous data flow.

Hope you'll got something from here, go check your local Storage now!!

Comments (2)

Dinys Monvoisin's photo

I guess you need to mention that you can only store string local storage, thus the need for JSON parser and stringify method.

Since data flows across network as JSON format, we come across;