Basics of Local Storage
source link: https://dev.to/jtfinley/basics-of-local-storage-4l87
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Early on in my Software Engineering career, one of the first questions I had was how to store data on the client's computer for future use. This data will only be available in the browser you are currently working in and can be readily accessed when the page is reloaded. At this stage in my learning, I hadn't yet had any access to backend programming and didn't know how to accomplish this. This is where Local Storage comes in.
What is Local Storage?
Local storage is a key/value database that is available on a user's browser. This database can be persisted for an indefinite amount of time or until it is manually deleted. Local storage currently only accepts strings so if you are storing an array or object you are going to need to use JSON.stringify()
on it first to convert it into a string.
When Not To Use Local Storage?
Although Local Storage has many uses, it is important to not save any sensitive information. This includes passwords, API keys, authentication tokens, etc. Malicious third-parties can easily access this information and use it to their own gain.
When To Use Local Storage?
As mentioned earlier, Local Storage gives you persistence on your website. It is used to store information that the site should still be able to have even if it is refreshed. This is commonly done to save user preferences like UI themes. Local storage can also be used to save game statistics. A recent example is the popular game Wordle. Every day you play the game it saves items like the amount of guesses, your current win streak, and the win percentage. If you were to try and open the game in another browser or computer, you would find that all of your statistics would be gone.
Another Example
Let's take a look at an example with Dev.to. Visitors of the website who have a profile are able to change appearance settings like site theme and font. If we were to open up the browser developer tools we can take a look at what is currently saved in developer tools.
Above we can see that the browser currently has several keys saved inside of Local Storage. Inside of the config_body_class
key, there is a value of dark-theme and sans-serif. If one were to change the theme and the font in the settings, this change would be reflected in the config_body_class
key and would be persisted upon page reload.
Local Storage Methods
localStorage.key(index)
This method can be used to retrieve a value at a specific index. Passing in an index number will return all of the values at that specific index.
let key = localStorage.key(0)
//This will get the value of the first item in localStorage
localStorage.setItem(key, value)
This allows you to save a key/value pair to your browser.
localStorage.setItem("key", "value")
//This will add a key called "key"
//with a value of "value" to localStorage
To add something other than a string, you can use the following syntax
const movies = [
"Star Wars",
"Lord of the Rings",
"Harry Potter"]
localStorage.setItem("key", JSON.stringify((movies)))
localStorage.getItem(key)
This will read the data from local storage for the specified key. If the key doesn't exist, it will return null.
localStorage.getItem("key")
//To retrieve a specific key from
//local storage, you can pass in the key
//as a variable into getItem
To retrieve a key with a value other than a string, you will need to parse it first with the following syntax.
JSON.parse(localStorage.getItem("key"))
localStorage.removeItem(key)
This method will remove the specified key from localStorage. If the specified key does not exist then the method will return undefined.
localStorage.clear()
This method takes in no parameters and will simply remove all keys from localStorage. These keys will need to be added again if they are to be accessed again.
Conclusion
Local storage is a database of key/value pairs that is accessible inside of the browser. It is very important to not store any sensitive data inside of LocalStorage. When storing objects inside of LocalStorage you need to remember to convert it to a string using JSON.stringify(). You can retrieve this object using JSON.parse(). The possibilities are endless with LocalStorage.
What are some ways that you might use LocalStorage in a future project?
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK