Introduction

In this blog, I'm gonna discuss about cookies and browser storage (local and session). By the end of this blog, you will learn the advantage and overview of browser storage.

Before we go any further I want you to know why we need cookies and browser storage.

well, when we were using HTML4-supported browsers we didn't had any mechanism to store user information or any other data in the browser. As soon as the web advanced and the websites became complex we wanted to store users data to provide a personalized experience to users.

This led to the beginning of cookies. cookies helped us in storing key-value pair data on both client-side and server-side. It also provided an expiry timestamp after which the cookie data will get deleted automatically from the browser.

Understanding Cookies

Cookies are much different from browser storage. they store data up to 4kb. They are supported by the old browsers. We have to set the expiry timestamp manually, Also we can send an HTTP request in cookies to the server. Instead of understanding theory let's dive into coding.

Storing a data in cookies.

document.cookie="firstName=salman"

To view this in browser.

1. Right-click and go to inspect.
2. Click on the application tab.
3. Click on cookies which is inside storage section.

now we can see our data in key-value pair. Notice there is expiry timestamp we can add our own timestamp like this..

document.cookie="firstName=salman; expires=" + new Date(2022,09,10).toUTCString()

If we want to show our data in our console then we just have to type

console.log(document.cookie)
//expected output:firstName=salman

Cookies were very useful until the client-side application became complex we wanted to store more data on the browser but cookies can store up to 4kb which was not enough.

In HTML5 supported browsers websites were introduced with browser storage APIs for storing data. These are available in window object globally also they are easy to access using javascript.

The major difference between cookies and browser storage APIs is storage capacity and browser storage can only be accessed through client-side javascript.

Browser storage apis

There are some methods for browser storage apis which we discuss later when we use them.

1. setItem()
2. getItem()
3. removeItem()
4. clear()
5. length
6. key()

Session Storage

As the name suggests the session storage will persist the data as long as the browser tab is opened. Also, we cannot view this data in the other tab and if we close the tab the tab data will get deleted automatically. Opening a new tab will create new session storage. Session storage will store data up to 5-10MB and it will vary from browser to browser.

Storing data in session storage

sessionStorage.setItem("id", "al2349wggtr")

If you console the session storage you will get data with length.

console.log(window.sessionStorage)
//expected output:Storage {id: '221ljlasdf', length: 1}

Storing JSON data in session storage

//Wrong way
const data= {
      id:"2sdflj44",
      name: "Adkins Coleman",
}
sessionStorage.setItem("user",data)

if we try to set data like this it will parse our data into string which will led to store our data like this and we can't access this.

To solve this we need use JSON.stringify to our object which will convert our object into JSON string.

//Right  way
const data= {
      id:"2sdflj44",
      name: "Adkins Coleman",
}
sessionStorage.setItem("user",JSON.stringify(data))

Now we know how to store let's retrieve the session data.

console.log(JSON.parse(sessionStorage.getItem("user")))
//expected output:{id: '2sdflj44', name: 'Adkins Coleman'}

since our data is in JSON string format we use JSON.parse to the get item. Removing item from session storage

sessionStorage.removeItem("user"))

Removing full session storage

sessionStorage.clear()

What if you set an new item with the existing key in browser storage? Answer is simple it will overwrite the previous item.

Local Storage

Local storage is same as session storage the only difference is data persistent. Unlike session storage the data will not automatically deleted when we close the tabs or browser. It will only get deleted if we manually the delete data from either local storage in browser setting or from removeItem() method.

The javascipt code is similar to session storage just replace sessionStorage to localStorage.

Local , Session and cookies in an nutshell

If you liked this blog please share this with your friend. -khizer khan