LocalStorage and SessionStorage in the Web Storage APIs

SessionStorage and LocalStorage are two key components of the web storage API. These APIs enable the storage of data on the client-side of web applications.

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: When you close the current tab and then use the keyboard shortcut Ctrl+Shift+T to reopen that tab, you would expect that SessionStorage data should not be preserved. However, it's interesting to note that while this behavior is consistent in Chrome and Firefox, Safari does not maintain SessionStorage data when restoring the tab. This variation in behavior is a browser-dependent feature when it comes to tab restoration. 

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: 'TheGioiLapTrinh.nEt', 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.