What is local storage

Often you need to maintain a small amount of data for a web application such as a key, current timezone, user logged time etc. but you do not want to bear an overhead of sending this data to server or saving it in a database.

Solution is to use local storage of the browser.



What is local storage

Data stored in local storage has no expiration duration. Data stored in local storage is bound to a domain name and can be accessed by web paged loaded inside the same domain. Thus, data stored for codippa.com will be accessible to pages that belong to it. Pages of google.com cannot access it. Values stored in local storage are not sent to server. You need to explicitly retrieve them and then send to the server. With local storage, you can store 5 to 10 MB of data.

HTML5 introduced the concept of web storage where you can store data inside the browser. This data remains forever till it is not cleared even after the browser window is closed.Data in browser’s local storage is set and retrieved using javascript and it is stored in the form of key-value pairs.Following are some important aspects regarding local storage

How to use local storage

Browser’s storage can be accessed using window.localStorage object of javascript. You can also directly call localStorage object since window object is implicit.

This object stores the data in key-value pairs. There are 2 ways in which data can be stored in localStorage object.

1. Using built-in methods

localStorage object has following methods that are used to save and get data from local storage.

setItem: This method is used to save data into local storage. It takes two arguments with first argument as the key and second as the value to be stored. Note that it stores both key and value in string format.

If the key is not a string, then this method will raise an error while if the value is not a string then it will be converted to string format.

getItem: This method is used to get the value stored against a key in local storage. It takes a single argument which is the key.

If the specified key-value mapping is not present, then it returns null .

Example,

// save in local storage window. localStorage . setItem ( 'name' , 'codippa' ) ; // get from local storage let data = window. localStorage . getItem ( 'name' ) ; console. log ( data ) ; // prints codippa // save in local storage window.localStorage.setItem('name', 'codippa'); // get from local storage let data = window.localStorage.getItem('name'); console.log(data); // prints codippa



2. Using key access

localStorage

objectname[‘key’] = value

As stated previously,object stores data in key-value pairs. It is just like a normal javascript object which has key-value pairs.For assigning a value to a key in javascript object, below notation is used

If the key is not present, then it is created. If the key is already present, then its value is overwritten. Data in localStorage also can be saved using similar syntax.

To know better about javascript objects, refer this.

For retrieving the value corresponding to a key, same syntax is used except that the value is assigned to some variable as

let value = objectname[‘key’]

Example,

// create a key-value pair localStorage [ 'name' ] = 'codippa' ; console. log ( localStorage [ 'name' ] ; // prints codippa // create a key-value pair localStorage['name'] = 'codippa'; console.log(localStorage['name']; // prints codippa

Removing item from local storage

For removing a particular key-value pair from local storage, use removeItem method of localStorage object. This method takes a key and removes the key-value mapping corresponding to the supplied key from local storage.

If you want to remove all key-value pairs or empty local storage, then use clear method of localStorage object. This method takes no arguments and removes all the data from local storage.

Example,

// remove key-value pair with key as 'name' localStorage. removeItem ( 'name' ) ; // empty local storage localStorage. clear ( ) ; // remove key-value pair with key as 'name' localStorage.removeItem('name'); // empty local storage localStorage.clear();

Save arrays or json objects

localStorage

JSON.stringify

JSON.parse

// create a json object const language = { 'name' : 'javascript' , 'type' : 'web' } ; // save it in local storage localStorage. setItem ( 'language' , JSON. stringify ( langauge ) ) ; // create an array const numbers = [ 1 , 2 , 3 , 5 ] ; // save it in local storage localStorage. setItem ( 'numbers' , JSON. stringify ( numbers ) ) ; // get back json object const json = JSON. parse ( localStorage. getItem ( 'language' ) ) ; // access a key console. log ( json [ 'name' ] ) ; // prints javascript // get back array const array = JSON. parse ( localStorage. getItem ( 'numbers' ) ) ; // access second array element console. log ( array [ 1 ] ) ; // prints 2 // create a json object const language = {'name': 'javascript', 'type': 'web'}; // save it in local storage localStorage.setItem('language', JSON.stringify(langauge)); // create an array const numbers = [1, 2, 3, 5]; // save it in local storage localStorage.setItem('numbers', JSON.stringify(numbers)); // get back json object const json = JSON.parse(localStorage.getItem('language')); // access a key console.log(json['name']); // prints javascript // get back array const array = JSON.parse(localStorage.getItem('numbers')); // access second array element console.log(array[1]); // prints 2

As mentioned earlier, aobject can only store values in string format. Thus, if you want to save an array or a json object in local storage, convert it to string usingmethod and save.When retrieving the data, usemethod to convert them into their actual type.

Get total number of saved values

If you want to know the total number of key-value pairs stored in localStorage object, then it has a length property which can be used.

Example, localStorage.length in above example will return 2.



Let’s tweak in

Local storage can only be used to store limited amount of data. It can not be used as a replacement of server side database. Do not store sensitive information in local storage such as user names, passwords as the contents of localStorage are clearly visible since they are stored in plain text and not encrypted. Data stored in localStorage remains even after the browser window is closed. Local storage is different from cookies in that Cookies can store small amount of data(4 KB max) as compared to local storage.

Cookies are sent to the server with every request

Cookies expire(or get deleted) automatically after some specified time.

Hope this post successfully demonstrated the concept and usage of local storage in browsers. Hit the clap below to appreciate the content and motivate us to write more such stuff.

0