What is localStorage?
Imagine filling out a form online and your device disconnecting from the internet connection. You have filled out your name and age; all you have left to fill out is your country’s name and gender. You fill these out while you’re still disconnected from the Wi-Fi. The moment you reconnect to Wi-Fi, you submit the completed form.
When you entered your country’s name and gender without being connected to the internet, did you notice that you could log back in without losing your information? This is localStorage.
Among its uses are remembering the contents of a shopping cart, signing in to a website, and tracking whether a user enabled dark mode. This is because the data stored in localStorage does not expire. Additionally, it continues to store data after the browser is closed.
Advantages of localStorage
There are many benefits to using localStorage. On top of the list is its ability to store data even after the browser is closed. The following is a list of some of its advantages:
- The data is stored using key-value pairs.
- The data stored does not expire.
- It holds information on the client side.
- Even after the browser is closed, it still keeps the data.
- With each HTTP request, sending data back and forth is unnecessary.
- It can store up to 5MB of data.
Disadvantages of localStorage
Utilizing localStorage has several benefits, but it also has some drawbacks. Here are a few of them:
- It should not be used to store private and important information because it is susceptible to Cross-Site Scripting (XSS) attacks.
- It has no data protection, making it accessible with any code.
- It can only contain strings but can be serialized with JSON.stringify().
- It cannot be accessed from different domains or subdomains.
Differences between Cookies and localStorage
Cookies are simply data stored in small text files on your device. It maintains the state of a user and remembers the user’s information on all web pages. Cookies and localStorage share these characteristics, but what distinguishes the two? Here are the differences between Cookies and localStorage:
|It has an expiration date.||It has no expiration date.|
|Cookies are read by the server.||They are only read by the browser.|
|It has a maximum storage capacity of 4kB.||It has a maximum storage capacity of 5MB.|
|It is fairly secure.||It is not secure at all.|
There are four methods we use to work with localStorage. These include
setItem(): This method saves data to localStorage. It takes a key-value pair and adds it to localStorage.
getItem(): This method reads data from the localStorage. It takes a key and returns the corresponding value.
removeItem(): This method removes data from localStorage. It does so by taking a key and removing the corresponding key-value pair.
clear(): This method clears localStorage from the domain.
Session Replay for Developers
Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — an open-source session replay suite for developers. It can be self-hosted in minutes, giving you complete control over your customer dataHappy debugging! Try using OpenReplay today.
Application of localStorage
The best way to learn is to code and see how things work. We will use the four methods to understand how they work. Open your browser console and open the Developer’s Tools.
localStorage, and the currently stored data will be returned (assuming it’s initially empty):
localStorage.setItem('myKey', 'testValue'). The string value will be stored in the key
undefined means that there was no value returned. Enter
localStorage again to view the data that is stored.
localStorage.getItem('myKey'), and the corresponding string will be returned:
localStorage.removeItem('myKey') to clear the corresponding key-value pair:
undefined means no value is returned, showing that the key-value pair has been cleared. To confirm, enter
localStorage. The length returned is
localStorage.clear() to clear the
localStorage from the domain:
In this article, we’ve looked at localStorage and how to use it. Consider adding this tool to your coding!
- Domain. A domain is equivalent to your website’s physical address.
- HTTP request. A Hypertext Transfer Protocol (HTTP) request occurs when a browser sends a “request” to a website’s server for information on a webpage.
- Key-value pair. This is a set of linked items: a unique identifier (key) and a value (value).
- Serializing. This procedure turns a data object into a stream of bytes so it can be transmitted or stored in memory.
- Server-side language. This is a programming language that performs tasks on the server side before the page is sent to the browser for rendering. Examples include Python, Golang, PHP, Ruby, Java, etc.
- Synchronous. This means the process runs only after other tasks are completed or handed off.