The Local Storage

Local Storage is a property that allows JavaScript sites and apps to save key-value pairs in a web browser with no expiration date. This means the data stored in the browser will persist even after the browser window is closed.

That's it, that's all there is to know about it….unless you’re a programmer, especially a javascript developer then in that case stick around while I put you through its origin and how it works.

Origin

Local storage is a type of web storage which is sometimes known as DOM storage (document object model storage) which provides web apps with methods for storing client-side data, web storage supports persistent data storage similar to cookies but with a greatly enhanced capacity and no information stored in the HTTP request header. it has two main types Local storage and Session storage, which differ in scope and lifetime. Data placed in local storage is per origin — the combination of protocol, hostname, and port number as defined in the same-origin policy. While session storage is both per-origin and per-instance (per-window or per-tab) and is limited to the lifetime of the instance.

How it works

Now, let’s talk about Local storage only, It’s a window object interface in JavaScript, which represents a window containing a DOM document and is available via the Window.localStorage property.

Window.localStorage is a read-only property that returns a reference to the local storage object used to store data that is only accessible to the origin that created it.

So where’s local storage stored?
Well in Google Chrome, web storage data is saved in an SQLite file in a subfolder in the user’s profile. The subfolder is located at \AppData\Local\Google\Chrome\User Data\Default\Local Storage on Windows machines and ~/Library/Application Support/Google/Chrome/Default/Local Storage on macOS.
Firefox saves storage objects in an SQLite file called webappsstore.sqlite, which is also located in the user’s profile folder.

There are five methods to choose from to use the local storage;

setItem()— This method is used to add keys and values to the local storage.
getItem() — This method is used to get items from the local storage.
removeItem() — This method is used to remove an item from the local storage buy key.
clear() — This method is used to clear the local storage.
key() — This method is used to retrieve a key of local storage by passing a number.

setItem():
It takes two parameters: a key and a value. The key can be referenced later to fetch the value attached to it. In practice.

Input:
window.localStorage.setItem("name", "Yasir Gaji");

Output:
"{"name":"Yasir Gaji","location":"Lagos, Nigeria"}"

name is the key andYasir Gaji is the value.

getItem():
This method accepts only one parameter, which is the key, and returns the value as a string. In practice.

To retrieve data, Input:
window.localStorage.getItem("user");

You should get this Output:
"{"name":"Yasir Gaji","location":"Lagos, Nigeria"}"

removeItem():
When a key name is passed, the removeItem() the method removes that key from the storage if it exists. If there is no item associated with the given key, this method will do nothing. In practice.

window.localStorage.getItem("name");

This would take out thenameitem if it exists.

clear():
When invoked, will clear the entire storage of all records for that domain. It does not receive any parameters. In practice.

window.localStorage.clear();

key():
This method comes in handy in situations where you need to loop through keys and allows you to pass a number or index to localStorage to retrieve the name of the key. In practice.

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

What are the local storage limitations?

• Do not store sensitive user information in localStorage.
• localStorage is limited to 5MB across all major browsers.
• It is not a substitute for a server-based database as information is only stored on the browser.
• localStorage is quite insecure as it has no form of data protection and can be accessed by any code on your web page.
• localStorage is synchronous, meaning each operation called would only execute one after the other.

Note:

1. Since the local storage is a window object interface it can as well be written as;
   localStorage.getItem("name");
localStorage.setItem("name", "Yasir Gaji");
localStorage.clear();
   and function perfectly.
2. 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 user = { name: "Yasir Gaji", location: "Lagos, Nigeria",}window.localStorage.setItem('user', JSON.stringify(user));

which means to re-use this value, you would have to convert it back to an object. To do this, we make use of the JSON.parse() method, which converts a JSON string into a JavaScript object.

JSON.parse(window.localStorage.getItem("user"));

Conclusion

I believe I’ve been able to educate you about Local Storage with my little understanding.
Do ask questions, and if this was helpful share it.