Local storage in JavaScript

What is localStorage in javascript?

The local storage is the storage location provided by the browser and that allows us to store key/value pairs in a web browser to use at a later stage of time.

The localStorage object stores the data without any expiration date, i.e. data stored in the local storage persists even after the browser is closed. The data will not be deleted even after a day, a week, a year.

The data stored in the local storage is read only.

window.localStorage property is used to access the local storage.

Modern browsers supporting local storage are

• Google Chrome ver 4.0 and above
• Microsoft Edge ver 8.0 and above
• Firefox ver 3.5 and above
• Apple Safari ver 4.0 and above
• Opera ver 11.5 and above

Web Storage API

The Web Storage API is a set of mechanisms that enable browsers to store key/value pairs. It is designed to be much more intuitive than using cookies.

The key/value pairs represent storage objects, which are similar to objects except they remain intact during page loads, and are always strings. You can access these values like an object or using the getItem() method.

The Web Storage API consists of two mechanisms: sessionStorage and localStorage. Both sessionStorage and localStorage maintain a separate storage area for each available origin for the duration of the page session.

Where is the localStorage stored on the computer?

In Google Chrome, local storage data is stored in the SQLite file in a folder, the path is given below

\AppData\Local\Google\Chrome\UserData\Default\Local Storage

window.localStorage

The localStorage mechanism is provided by the browsers via the window.localStorage property.

The window provides a wide range of functions, constructors, objects, and namespaces window.localStorage is a read only property and returns a reference to the local storage object that is used to store the data that is not accessible to by whom it was created.

Functions of localStorage

The use of localStorage in web applications can be done with the help of five functions

1. setItem(): Add key and value to localStorage
2. getItem(): This is how you get items from localStorage
3. removeItem(): Remove an item by key from localStorage
4. clear(): Clear all localStorage
5. key(): Passed a number to retrieve the key of a localStorage

setItem():  Store items in the localStorage

Syntax: window.localStorage.setItem('name', 'Hitesh');

Here, name represents the key and Hitesh represents the value.

Note: The local storage can only store strings.

To store arrays or objects, you would have to convert them to strings.

To do this, we use the JSON.stringify() method before passing to setItem().

const
person = {
    name: "Hitesh",
}

window.localStorage.setItem('user', JSON.stringify(person)); 

getItem(): Retrieve the items from the localStorage

To retrieve the items from the local storage we use the getItem() method. It retrieves the data stored in the local storage object.

Syntax: window.localStorage.getItem('name');

The above line returns

“{“name”:”Hitesh”}” 

To use this value, you would have to convert it back to an object.

To do this, we make use of the JSON.parse() method JSON.parse(window.localStorage.getItem('name'));

removeItem(): deleting the data from the localStorage

This method removes the local storage data

Syntax: window.localStorage.removeItem('name');

clear(): delete all items in localStorage

Use the clear() method to delete all items in localStorage.

window.localStorage.clear();

key(): How to get the name of a key in localStorage

Syntax: var KeyName = window.localStorage.key(index);

localStorage limitations

As easy as it is to use localStorage, it is also easy to misuse it:

• Never store sensitive user information in localStorage
• It is not a substitute for a server based database as information is only stored on the browser can be accessed by anyone with the knowledge to view the data stored in the browser
• localStorage is limited to 5MB across all major browsers
• localStorage is quite insecure
• localStorage is synchronous.