WorthSol

New web browsers support many ways to store data in a web browser on the client's computer. it allows you to store data for the long term. It opens the door for lots of features like Save Site or Documents for offline use, Getting back user-specific configurations for your site and more. In this post, we explain the different ways of web storage.

Most websites are dynamic. They collect data from users and store it in the database on a server. We called it server-side storage.

Client Side storage also works similarly. But it is user-specific. And it is stored on the End user system. There is Javascript API that allows you to retrieve data when needed.

Old-generation storage Cookies

Cookie storage has been around for a long time since the early days of the web browser. So web developers used to store information to personalize user experience. this is the oldest form of client-side storage.

We have two types of cookies. Session Cookies and Persistent cookies. Cookies are created on the server and sent to the client. Cookies can also be created, updated, and get value by a javascript document. cookie. HTTPOnly cookie flag can be used to restrict the cookie access for javascript.

Cookies can store 4kb of data. we can set it, to Expires or Max-Age attributes. it is called Persistent Cookies. If we do not set these attributes then it will be session cookies. It will be removed when the browser is closed. Cookies are sent to the server with every request. Cookies are accessible in any window.

Here is an example of how to use Cookies

Set
document.cookie = "name=Chintan";

Get
document.cookie

Remove
document.cookie = "name=";

Local Storage

Local storage store data without an expiration date. Data will not removed once you close the browser. It will be available at any time in future. Local storage store data in key/ value pairs. Local storage can store around 10MB of data. We can access it from any window. this storage never expires.

Here is an example of how to use Local Storage.

Set
localStorage.setItem("name", "Chintan");

Get
let myName = localStorage.getItem("name");

Remove
localStorage.removeItem("name");

Session Storage

Session storage is similar to a local storage object. But this store data for one session only. Data will be removed once the browser tab is closed. same as local storage session storage also store data in key/value pairs. Its storage capacity is around 5MB and it is accessible in one tab. session storage expires once we close the tab.

Here is an example of how to use Session Storage.

Set
sessionStorage.setItem("name", "Chintan");

Get
let myName = sessionStorage.getItem("name");

Remove
sessionStorage.removeItem('name');