Have you ever found yourself in a situation where you have to save and access stored data in form of Array, Object or just normal value without using the usual Database(MySql, MongoDb etc) ? Well, if your answer is Yes, you are in the right place.

We would start by clearly explaining the various terminologies involved in achieving this process.

LocalStorage: This is a type of web storage that allows Javascript websites and applications to store and access stored data right in the browser with no expiration date. This means that the data stored in the browser will persist(continue to exist) even after the browser window has been closed and can never be deleted unless the user manually deletes it.

LocalStorage Methods

setItem(): Add key and value to localStorage

getItem(): Retrieve a value by the key from localStorage

removeItem(): Remove an item by key from localStorage

clear(): Clear all localStorage

key(): Passed a number to retrieve nth key of a localStorage

setItem()

This method just as the name implies allows you to store values in the localStorage object.

It takes two parameters, a key and a value. The key can be referenced later to fetch the value attached to it.

localStorage.setItem('name', 'Nonso Daniel');

Where name is the key and John Doe is the value. Also note that localStorage 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: "Nonso Daniel",
    location: "Lagos, Nigeria",
}

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

Guess What?

We just successfully saved our data to our Browser's localStorage

getItem()

The getItem() method allows you to access the data stored in the browser’s localStorage object.

It accepts only one parameter which is the key and returns the value as a string.

To retrieve the user key stored above:

localStorage.getItem('user');

or

localStorage.user

This returns a string with value(the same value we saved with setItem ) as;

“{“name”:”Obaseki Nosa”,”location”:”Lagos”}”

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

To do this, we make use of JSON.parse() method which converts a JSON string into a Javascript Object.

let data = JSON.parse(localStorage.getItem('user'))

In the code above, we created a variable using Es6 let keyword, then used our JSON.parse() to convert our stringify value into a Javascript Object and then assigned the result to the data variable.

removeItem()

The removeItem() method when passed a key name, will remove that key from the storage if it exists. If there is no item associated with the given key, this method will do nothing.

localStorage.removeItem('name');

clear()

This method, when invoked clears the entire storage of all records for that domain. It does not receive any parameters.

localStorage.clear();

key()

The key() method comes in handy in situations where you need to loop through keys and allows you pass a number or index to local storage to retrieve the name of the key.

let KeyName = localStorage.key(index);

LocalStorage JavaScript browser support

LocalStorage as a type of web storage is an HTML5 specification. It is supported by major browsers including IE8. To be sure the browser supports localStorage, you can check using the following snippet:

if (typeof(Storage) !== "undefined") {
    // Code for localStorage
    } else {
    // No web storage Support.
}

The limitations of JavaScript LocalStorage

As easy as it is to use localStorage, it is also easy to misuse it. The following are limitations and also ways to NOT use localStorage:

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

BREAKING NEWS

You are hereby declared an Expert in using Javascript LocalStorage 🔥

Up Next

Saving Data With Javascript LocalStorage

If you enjoyed this article or if you have any other question(s) or addition(s), react as much as you can 😃😃😃

I’m always reachable on nonsodaniel07@gmail.com.

Have a wonderful day.

Nonso Daniel 😃