LocalStorage and SessionStorage | Web Storage APIs

SessionStorage and LocalStorage are known as the web storage API. Data can be stored on the client side by using these APIs. 

SessionStorage:

• SessionStorage is used for storing data on the client side.
• Maximum limit of data saving in SessionStorage is about 5 MB.
• Data in the SessionStorage exist till the current tab is open if we close the current tab then our data will also erase automatically from the SessionStorage.

Note: If after closing the current tab we press ctrl+shift+T for restoring that tab, then ideally in SessionStorage data should not be there but we can see that SessionStorage is maintained in the chrome, firefox but not in the safari browser while restoring the tab. It is the browser dependent feature while restoring the tab. 

LocalStorage:

• Like SessionStorage, LocalStorage also used for storing the data on the client side.
• Maximum limit of data saving is about 5 MB in LocalStorage also.
• LocalStorage has no expiration time, Data in the LocalStorage persist till the user manually delete it. This is the only difference between LocalStorage and SessionStorage

Below are some details about SessionStorage and LocalStorage:

• Both are Object type:
• Format of storing data in SessionStorage and LocalStorage: Data must be stored in key-value pair in the SessionStorage and LocalStorage and key-value must be either number or string

Here it can be seen that till we are inserting data in the form of string or number, we are able to get data correcrly! In the second last attempt we are going to inserting a plain object into key geek and when we get that item it return [object, object]

LocalStorage.setItem("geek", {
"key":"value"
})
undefined
LocalStorage.getItem("geek")
"[object Object]"

If we want to store object or something else except string/number then it must be in the form of string that is what we have done in the last attempt.

LocalStorage.setItem("geeks", JSON.stringify({
"key":"value"
}))
undefined
LocalStorage.getItem("geeks")
"{"key":"value"}"

In this attempt we use JSON.stringify() method to convert an object into string.

Common methods in LocalStorage and SessionStorage:

• For storing data in web storage:

LocalStorage.setItem("key", "value");  //key and value both should be string or number;
SessionStorage.setItem("key", "value");  //key and value both should be string or number;

• For getting data from web storage:

LocalStorage.getItem("key");
SessionStorage.getItem("key");

Here we will pass the key and it will return value.

• For Getting the length of web storage object:

LocalStorage.length; 
SessionStorage.length;

• For deleting a particular key-value pair:

LocalStorage.removeItem("key");
SessionStorage.removeItem("key");

when we pass key in method,
it will erase the complete data related to that key.

• For clearing complete storage:

LocalStorage.clear();
SessionStorage.clear();

• For getting nth key name from web storage we will pass the number n:

LocalStorage.key(n);
SessionStorage.key(n);

Note:

1. Web storage security is a big concern. it is highly recommended never to store sensitive information in web storage as it always stores the data in the plain text format, and anyone can steal the data easily. so never store password or payment credentials with web storage.
2. Web storage can only store the data on the client side, only client side or our javascript can play with that data. To be saved data on the server-side, Cookies is the better option.

Storing Non-String values with JSON:

localStrorage can use only the String values and if we want to store object or arrays as values in localStorage then we can use the JSON.stringify() to convert them into the String.

When the  creating or updating key/value pairs in localStorage  then we can use JSON.stringify() with the object or array as the argument:

let gfgObj = { name: 'GeeksForGeeks', Score: '100' };
localStorage.setItem(key, JSON.stringify(gfgObj));//Here Object is store as the String

Although gfgObj is an object, JSON.stringify(gfgObj) converts   into a string. So gfgObj is now a valid localStorage value.

To read and return Stringified values, use the JSON.parse() method. The JSON.parse() method takes JSON strings and converts them into JavaScript objects. JSON.parse() takes .getItem() as it’s argument:

let item = JSON.parse(localStorage.getItem(key));

This is also same for the sessionStorage.