LocalStorage is a web storage that allows you to store and access data as key:value pairs inside a Web Browser using JavaScript. Data stored with localStorage is permanent and stays forever unless deleted manually or programmatically.
In this article we will look at the five (5) methods available when using local storage, the benefits of localStorage, and things to consider when using it.
Methods
As mentioned above, you have five (5) methods available when working with localStorage. These are:
- setItem() – saves a key:value pair to localStorage
- getItem() – retrieve an item in localStorage via a key
- removeItem() – deletes the item for the given key
- clear() – deletes all items
- key() – returns the key at the given index
Before we look at each method, it is important to understand that the localStorage operated on will be the current domain from which the methods are executed.
setItem(key, value)
You use the setItem method to store new data inside localStorage. It accepts a key and a value.
localStorage.setItem('school', 'University of Technology, Jamaica');
The above code will create a key named school and store it with the value university of Technology, Jamaica.
Storing Objects in localStorage
It’s important to note that localStorage can only store string values. If we want to store an object, we have to first convert it to a string value. We do so using the JSON.stringify() method.
// Create user object
let user = {
name: 'Taslan Graham',
nationality: 'Jamaican'
};
localStorage.setItem('user', JSON.stringify(user)); // Stores user as JSON string
The above will convert the user object to "{"name":"Taslan Graham","nationality":"Jamaican"}" and store it.
getItem(key)
The getItem() method accepts a key and returns its value.
localStorage.getItem('school');
This will return 'University of Technology, Jamaica'.
We can also retrieve the user item stored earlier.
let user = localStorage.getItem('user');
This returns "{"name":"Taslan Graham","nationality":"Jamaican"}". We can convert this JSON string value back into a JavaScript object.
JSON.parse(user); // {name: "Taslan Graham", nationality: "Jamaican"}
removeItem(key)
The removeItem method accepts a key and deletes it from localStorage, if it exists.
localStorage.removeItem('school');
clear()
The clear method will delete all data inside localStorage for the domain.
localStorage.clear();
key()
The key method accepts a number(n) and returns the nth key inside in the localStorage object;
localStorage.key(0)
The above code would return the first key inside localStorage.
The key method can be useful when we want to access each key inside localStorage without knowing their names.
for(const i = 0; i < localStorage.length; i++){
const key = localStorage.key(i);
console.log(localStorage.getItem(key);
}
In the above code, we start looping at zero and for each iteration we use the value of i to retrieve the key at that position inside localStorage; we store the key inside the key variable. We then log the value of the current key to the console.
Benefits of localStorage
localStorage provides some very interesting benefits. These includes:
1. localStorage is supported by the major modern browsers.
This means you can use it within your app without worries.
But, if you want to ensure that the user’s browser supports localStorage, you can do the following.
if (typeof(Storage) !== "undefined") {
// Write code for localStorage here
} else {
// No localStorage support
// Do something else
}
2. Can be used for simple caching
Most browsers provides up to 10MB for web storage. This means you could use localStorage for caching data which rarely changes and is accessed often throughout your application.
3. The data can be accessed easily and quickly
You can retrieve data without making a network call.
Things to consider
When using localStorage there a couple of things to take into consider. Well, they are more like thing not to do when using localStorage.
1. Don’t store sensitive data in localStorage
There’s no security associated with localStorage. Anyone can view the data. Therefore , it is not suitable for storing sensitive information such as user passwords.
2. You may still need an actual database
The data stored is localized to the user’s browser and is only accessible there. Therefore localStorage is not a substitute for a database.
In this article we covered localStorage, and the methods available when working with it. Additionally, we looked at some benefits of localStorage as well as some things to take into consideration when using localStorage.
If you enjoy this article, leave a comment about the what was most valuable to you. Also share with friends who might find it useful.
Until next time, Think, Learn, Create, Repeat!
