Local Storage and Session Storage (JavaScript)

No, I won't tell you any definition. Just get on the train and by the end of this blog, you'll have a clear understanding of local storage and session storage.

1. Inspect whatever page you are on.
2. Click on Application.
3. Click on storage and you'll see local storage and session storage right there. Both local storage and session storage store key-value pairs.

The major difference between local storage and session storage is that after closing the browser the key-value pairs stored in session storage get lost.

Now, let's understand how to operate on local storage with some examples.

Example1: give key-value pair to the local storage.

localStorage.setItem(Name1, 'Rajat');

Let's see "typeof" of the local storage:

In the above example, we saw how to set key-value pairs in the local storage. Now, let's understand how to get items from the local storage.

Example 2:

let name = localStorage.getItem('Name1')
console.log(name)

Result: Rajat

Now, let's try to get some value that did not exist.

Example3:

let name = localStorage.getItem('Name2')
console.log(name)

Result: null

The result is null if you try to fetch something from local storage that did not exist.

Many times we want to store arrays in local storage since arrays are easy to work with (we have so many inbuilt methods for arrays). However, one limitation of local storage is that it stores the array as a string. let's see what I mean:

  localStorage.setItem('Name1', 'Rajat');

  let fruitsArray = ['Apple', 'Banana', 'Orange', 'Grapes', 'Mango']
  localStorage.setItem('impArray', fruitsArray);

In order to overcome this issue ☝️, we use JSON.stringify. See it in action below:

Example 4: storing array in local storage:

  localStorage.setItem('Name1', 'Rajat');

  let fruitsArray = ['Apple', 'Banana', 'Orange', 'Grapes', 'Mango']
  localStorage.setItem('impArray', JSON.stringify(fruitsArray));

Example 5: getting array from local storage.

 console.log(localStorage.getItem('impArray'));

The above result may look like an array but we are getting string from local storage instead of array. let me prove it.

 console.log(typeof localStorage.getItem('impArray'));

Therefore, in order to get an array from local storage, we use JSON.parse. See below.

Example 6: get an array from the local storage?

 console.log(JSON.parse(localStorage.getItem('impArray')));

Hence, we use:

1. JSON.stringify: To set array as the value in local storage.
2. JSON.parse: To get an array from local storage.

Example 7: Clear local storage.

  localStorage.setItem('Name1', 'Rajat');

  let fruitsArray = ['Apple', 'Banana', 'Orange', 'Grapes', 'Mango']
  localStorage.setItem('impArray', JSON.stringify(fruitsArray));

  localStorage.clear()

Hence, we can clear localStorage using

.<br/>

Example 8: Remove only the 'name1' key-value pair from local storage.


```javascript
  localStorage.setItem('Name1', 'Rajat');

  let fruitsArray = ['Apple', 'Banana', 'Orange', 'Grapes', 'Mango']
  localStorage.setItem('impArray', JSON.stringify(fruitsArray));

  localStorage.removeItem('Name1');

As you can see above, In order to remove a particular key-value pair we use

. 

That's all about local storage. <br/>
We run similar operations in session storage, the only difference being we use session storage in place of local storage:

1. sessionStorage.setItem(Name1, 'Rajat');
2. sessionStorage.getItem(Name1, 'Rajat');
3. sessionStorage.setItem('impArray', JSON.stringify(fruitsArray));
4. console.log(JSON.parse(sessionStorage.getItem('impArray')));
5. sessionStorage.clear()
6. sessionStorage.removeItem('Name1'); ```

Let me reiterate: The only major difference between local storage and session storage is as soon as we close the browser, we lose whatever is saved in session storage. However, this is not the case with local storage.

and finally, let's see what MDN has to say:

The localStorage read-only property of the window interface allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions.

The read-only sessionStorage property accesses a session Storage object for the current origin. sessionStorage is similar to localStorage; the difference is that while data in localStorage doesn't expire, data in sessionStorage is cleared when the page session ends.

That's all folks.

If you have any doubt ask me in the comments section and I'll try to answer as soon as possible.

I write one article every day related to web development (yes, every single day). Follow me here if you are learning the same..

If you love the article follow me on Twitter: @therajatg

If you are the Linkedin type, let's connect: https://www.linkedin.com/in/therajatg/

Have an awesome day ahead 😀!