STORING DATA IN WEBPAGES

Internet ‘Fortune cookies’ right inside your browser

Ever opened a random webpage and the first thing you’re greeted with is cookie? They are not edible so what’s their purpose??!

Prior to the introduction of html5 and Web storage APIs, only cookies were used to store web data.

Cookies are the oldest and most common way of storing data. A cookie is basically some string-based information. It is usually saved on a server, nevertheless, up to 4kb of data can also be saved in the browser. The working is simple, each time a request is made from the browser, the browser automatically attaches the cookie along with it. Now the server receives the information that was set in the browser.

The information stored in the web storage isn’t sent to the web server as opposed to the cookies where data sent to the server with every request. where cookies let you store a small amount of data (nearly 4KB), the web storage allows you to store up to 5–10MB of data.

Web Storage APIs are used a lot by many big e-commerce companies to store some less relevant user-specific data into their browsers. Some companies even use it to optimize the performance of the web page speed as accessing web storage is faster than making a request to the server and getting the data.

Web storage consists of two APIs; localStorage and sessionStorage, which differ in scope and longevity:

Local storage — The local storage uses the localStorage object to store data for your entire website permanently. That means the stored local data will be available on the next day, the next week, or the next year unless you clear browser data.

Session storage — The session storage uses the sessionStorage object to store data on a temporary basis, for a single browser window or tab. The data disappears when session ends i.e. when the user closes that browser window or tab.

Data in Web storage and cookies can be viewed in the application section of dev tools with Shift + Ctrl + J on windows.

To get started with localStorage, we need to create some variables and save them in localStorage

In order to do that, we need to access the localStorage object in JavaScript. They are some methods we can use. The common ones include:

localStorage.setItem(Key, Value) — Save data into local storage
localStorage.getItem(Key) — Get data from inside local storage
localStorage.removeItem(Key) — Remove data from storage

The key is what you use to get or remove data from inside web Storage

localStorage.setItem(‘propertyName’,’value’);
localStorage.getItem(‘propertyName’);
localStorage.removeItem(‘propertyName’);

The string datatype is the only type of data that can be stored on web storage. JSON for instance needs to be stringified, stored, and parsed back. Object data types cannot be stored as values inside web storage. Enter JSON.

The JSON object has two different methods, Parse() and Stringify().

JSON.parse() converts a string into an Object, while JSON.stringify() converts an object back into a string

Example:

let stringCart= JSON.stringify(firstCart) /*convert fifthCart object to string*/
localStorage.setItem(‘item’, stringCart) /*store “string” to localstorage*/
let objCart= JSON.parse(localStorage.getItem(‘item’)) /*convert string back to object*/

The sessionStorage object works in the same way as localStorage. You can replace the above example with the sessionStorage object to expire the data after one session. Once the user closes the browser window, the storage will be cleared. In short, the APIs for localStorage and sessionStorage are identical, allowing you to use the following methods:

setItem(key, value)
getItem(key)
removeItem(key)
clear()
key(index)
length