Chuck's Academy

Web Storage API in HTML5

Home / Topic / Web Storage API in HTML5 / Understanding `localStorage`

Understanding `localStorage`

In this chapter, we will explore localStorage, one of the two storage options in HTML designed to store data persistently in the user's browser. localStorage allows data to be stored on the client side without being sent to the server, making it ideal for saving configurations, preferences, and other information that the user needs to retain between browsing sessions.

What is localStorage?

localStorage is a browser storage API that allows web applications to store data in key-value pairs. This data remains in the browser even after the browser is closed or the device is turned off, until it is manually deleted or through a programmed action.

Main Features of localStorage

  • Long-Term Persistence: Unlike sessionStorage, data in localStorage is not deleted when the browser window or tab is closed. It remains in the browser until it is manually removed by the user or through code.
  • Domain Scope: Data stored in localStorage is only accessible within the same domain (same combination of protocol and domain name) that created it. This means data cannot be accessed from a different domain, enhancing security.
  • Storage Capacity: localStorage allows storing up to approximately 5-10 MB, depending on the browser, which is significantly larger than the 4 KB limit of cookies.

Basic Methods of localStorage

The localStorage API offers several methods to easily manipulate data:

  1. setItem(key, value): Saves a key-value pair in localStorage.
  2. getItem(key): Retrieves the stored value associated with a specific key.
  3. removeItem(key): Removes the key-value pair from localStorage.
  4. clear(): Deletes all data stored in localStorage.

Examples of Using Basic Methods

Storing Data in localStorage

javascript
"In this example, we store the value dark with the key theme in localStorage. This is useful for storing user preferences, such as a dark or light theme."

Retrieving Data from localStorage

javascript
"Here we retrieve the stored value with the key theme using getItem and display it in the console. If the key does not exist, the method will return null."

Deleting Data from localStorage

javascript
"This code removes the value associated with the key theme in localStorage. This is useful for deleting specific user preferences."

Clearing All Content from localStorage

javascript
"This clear method removes all data stored in localStorage. Use it with caution, as it will remove all saved keys and values."

Using JSON with localStorage

Since localStorage only stores data as text strings, it's common to use JSON to store complex objects. This is achieved by converting objects to JSON strings using JSON.stringify() and retrieving them later with JSON.parse().

Example of Storing an Object

javascript
"Here we create a preferences object with properties like theme and fontSize, convert it to JSON using stringify, and store it in localStorage."

Retrieving an Object from localStorage

javascript
"This example shows how to retrieve the preferences object from localStorage. We use JSON.parse to convert it back into a JavaScript object, allowing us to access its properties like theme and fontSize."

Practical Examples of Using localStorage

Storing User Preferences

A common use of localStorage is to store user preferences, such as the page theme or the selected language. This allows the site to remember the user's settings between visits.

javascript
"In this example, we use a function to set the page theme and store it in localStorage. Then, upon loading the page, we check if a theme is already saved and apply it automatically if it exists."

Storing Form Data

localStorage can also be useful for storing form data, so users don't lose information if the page is reloaded accidentally.

javascript
"This code saves the value of a text field in localStorage each time it changes. When the page reloads, we check if there is a saved value and restore it to the text field."

Best Practices and Limitations of localStorage

Although localStorage is extremely useful, it also has limitations and important considerations:

  • Avoid Storing Sensitive Data: Due to its client-side accessibility, localStorage is not suitable for sensitive data such as passwords or access tokens. This is especially important because storage is vulnerable to Cross-Site Scripting (XSS) attacks.
  • Use JSON for Complex Data: Since localStorage only stores data in text string format, it is advisable to use JSON to store and retrieve complex data like objects or arrays.
  • Limited Capacity: Although the localStorage limit is larger than that of cookies, it is still relatively small compared to server storage. It is recommended not to use localStorage for large amounts of data.

Conclusion

In this chapter, we have explored how localStorage works and is used to store data persistently in the user's browser. We have seen how to use the main methods of localStorage and how to store and retrieve complex data using JSON. In the next chapter, we will learn about sessionStorage, another HTML storage option that allows storing temporary data that only persists during the browsing session.

Back to previous chapter
Mark as read and continue
Ask me anything