If you are a developer and want to enter the world of .NET, you need to know what possibilities are possible. Since the .NET Framework is the most popular technology in the .NET ecosystem, you can use it to build a variety of applications, but recently, new things have emerged, such as .NET Core and .NET Standard library. Can we use it in a project or build?
The localStorage object is one of the most widely used objects in web programming. It provides a simple solution to locally store key-value pairs on the user's computer.
Most web developers prefer the localStorage API because it has simple syntax and can store up to 5MB of data.
In addition, the latest versions of all mainstream browsers support the Web Storage API, including localStorage and sessionStorage. Only Opera Mini does not support the webstorage API.
You can quickly verify that your browser supports the webstorage API by opening Chrome DevTools. Navigate to "Console", type the following code snippet, and press enter.
typeof(Storage)
If you receive an undefined , your browser does not support the webstorage API. If your browser supports it, then you should see the "function".
This article discusses the following issues:
- What is localStorage?
- What is the difference between localStorage and sessionStorage?
- How to perform CRUD operations using localStorage API
- What are the pitfalls in common local storage?
- What are the limitations of localStorage?
What is localStorage?
As mentioned earlier, the localStorage object is part of the browser's natively supported webstorage API. This is a simple and effective key/value storage solution.
For web developers, the biggest benefit of using localStorage objects is that they can be stored offline. Most importantly, when the user closes the browser or restarts the computer, we don't lose data. Even after the computer is restarted, the website can still use the localStorage API to read data stored locally on the user's computer.
This solution provides several interesting use cases for web developers.
- User settings for offline storage websites
- Keep user search history
- Keep items in the shopping cart
Next, let's compare localStorage and sessionStorage.
What is the difference between localStorage and sessionStorage?
While the two APIs look the same, there are subtle differences in how they are executed.
The localStorage API is used to store data locally. Therefore, locally saved data is not lost when the user refreshes the tab, closes the browser, or restarts the computer. It is an ideal solution for storing basic data for a long time.
The sessionStorage API is still valid after the page is refreshed, but can only work in the same tab.
In short, be careful when choosing a storage solution for your application. For example, the best way to do this is to store user settings information in localStorage. Instead, sessionStorage is best suited to store data for a specific session.
How to perform CRUD operations using localStorage API
This section shows you how to add, read, update, or delete using the localStorage API. On this basis, I will show you a tip for clearing localStorage on a specific page.
First, let's create a new key-value pair in the localStorage object. The setItem function accepts a key and its value. Select a suitable name for the key, which you may use to search again.
(‘my-key', ‘some-value')
Now let's retrieve the newly created object again.
let item = (‘my-key') (item) // Output: “some-value”
This is very simple. Let's continue to update the value of my-key. Note that we use the same setItem function to override its value.
(‘my-key', ‘new-value')
Finally, let's delete this key. The removeItem function accepts a parameter, which is the key you want to delete.
(‘my-key')
To make sure we have deleted all keys, let's use the clear function to clear everything stored in the application in localStorage.
()
Now we are ready for more advanced localStorage operations.
Advanced localStorage operation: traversal
Let's take a look at the methods used to traverse localStorage objects and find keys.
The first method uses the most direct for loop. Note that we can use the length property directly on the localStorage object.
for(let i=0; i<; i++) {
let key = (i)
(`${key} with value ${(key)}`)
}
We can also directly use the key method to retrieve the corresponding key.
for (let i = 0; i < ; i++){
let key = (i)
(key)
}
Next, let's take a look at the pitfalls to avoid when using the localStorage API.
Common pitfalls in localStorage
Let's take a look at two of the most common pitfalls when interacting with the localStorage API.
First, try storing a JSON object. The localStorage API is designed as a key-value pair storage. Therefore, this value only accepts strings and does not accept objects. However, this does not mean that we cannot store objects. We need to serialize it into a string.
const dinner = { apples: 5, oranges: 1 }
(‘my-dinner', (dinner))
When reading a serialized object, we need to parse it to JSON again.
let dinner = ((‘my-dinner'))
Second, try storing a boolean value. Similarly, the localStorage API only supports strings. Be careful when storing boolean values.
Fortunately, the solution is similar to storing a JSON object. When storing a boolean value, the setItem function will convert it to a string like this - "true". To read a boolean value with a string, we can convert it back to a boolean value using the method.
let myBool = ((‘my-bool'))
LocalStorage restrictions
Here is a quick review of localStorage restrictions.
- String-based storage
- Most browsers have limited storage space, up to 5 MB
- Trying to store huge strings blocks the main thread. Make sure not to update the same keys at the same time, as this will cause problems. In this case, it is better to look for alternative storage solutions, as the localStorage API is not designed for this purpose.
- Web worker or web service cannot access localStorage
- There is no built-in security mechanism. Therefore, we do not recommend storing passwords or data related to authentication. Anyone who has access to a user's browser can open a page and read the information stored in localStorage, just like a computer that is publicly available in a library.
This is the end of this article about how to use localStorage in JavaScript. For more information about how to use localStorage in JavaScript, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!