What is localStorage?
localStorage
is a way to store data on the client-side, in the browser. This data is stored in key/value pairs and is available to JavaScript code running on that page.
localStorage
is persistent, meaning that the data will remain even if the browser is closed and reopened. This makes it a good choice for storing data that needs to be accessed later, such as user preferences or settings.
It's important to know that the data stored in localStorage
is specific to the domain, so data stored on one site will not be available to another site.
How is localStorage different from cookies?
There are a few key differences between localStorage
and cookies. First, local storage is not sent with every HTTP request like cookies are, so it's more efficient. Second, local storage data is persistent, meaning it doesn't expire as cookies do. Finally, local storage data is also more secure since it's not transmitted over the network like cookies are.
How to use localStorage
Modern browsers provide a clear API to work with localStorage
, in this section we will take a closer look at methods allowing us to use this tool.
Storing the data
localStorage
is used to store data in key/value pairs. The setItem()
method is used to store data:
localStorage.setItem('key', 'value');
The 'key'
is the name of the item to store, and the 'value'
is the data to be stored.
Retrieving the data
The getItem()
method is used to retrieve data:
localStorage.getItem('key');
This returns the value associated with the specified key, or null
if the key does not exist.
Removing data from localStorage
The removeItem()
method is used to remove data:
localStorage.removeItem('key');
This removes the data associated with the specified key.
Clearing localStorage
The clear()
method is used to clear all data from localStorage
:
localStorage.clear();
This method removes all data from localStorage
, including data that is not associated with any key.
localStorage Example
Here is a simple example that stores a user's name in localStorage
:
// Store the name 'John Smith' in localStorage
localStorage.setItem('name', 'John Smith');
// Retrieve the name from localStorage
let name = localStorage.getItem('name');
// Output the name to the console
console.log(name);
// Remove the name from localStorage
localStorage.removeItem('name');
This example first stores a name in localStorage
using the setItem()
method. It then retrieves the name from localStorage
using the getItem()
method. Finally, it removes the name from localStorage
using the removeItem()
method.
Limitations of localStorage
localStorage
is a powerful tool, but it has some limitations.
First, as we already mentioned at the beginning of the article the data stored in localStorage is specific to the domain. This means that data stored on one domain cannot be accessed by another domain.
Second, localStorage
only supports strings. This means that data that is not a string, such as objects, must be converted to a string before it can be stored in localStorage.
Third, localStorage
is not secure. Data stored in localStorage
is not encrypted and can be accessed by any code on the page.
Fourth, localStorage
is not reliable. Data stored in localStorage
can be lost if the user clears their browser cache or cookies.
Conclusion
localStorage
is a simple and convenient way to store data locally in the browser. It can be a powerful addition to your toolbox.
Just keep in mind the limitations of localStorage
, and be sure to serialize complex data structures before storing them.