1
`localStorage` is one of the Web Storage APIs that allows you to store data persistently in the user's browser. Unlike `sessionStorage`, which stores data until the browser tab is closed, `localStorage` keeps data until it is explicitly removed, even if the browser is closed.
##
How to store data there
To store data in `localStorage`, you use the `setItem()` method. It accepts two arguments: the key and the value you want to store. ```js localStorage.setItem('username', 'amargo85'); ``` In this example, the key is `“username”` and the associated value is `“amargo85”`. ##
Recover data from localstorage
```js const username = localStorage.getItem('username'); console.log(username); // Exibe "amargo85" ``` If the key doesn't exist, the `getItem()` method returns `null`. ##
Removing data from localStorage
To remove a specific item from `localStorage`, use the `removeItem()` method. ```js localStorage.removeItem('username'); ``` This code will remove the `“username”` key and its associated value. ##
Removing all data
If you want to clear all the data stored in `localStorage`, use the `clear()` method. ```js localStorage.clear(); ``` This command removes all stored key/value pairs. ##
Manipulating objects
localStorage only accepts values as strings. Therefore, if you want to store an object, you must first convert it to a JSON string with JSON.stringify(). Example: Storing an object ```js const user = { name: 'amargo85', age: 35 }; localStorage.setItem('user', JSON.stringify(user)); ``` **Retrieving the object** To retrieve the object, you must convert it back to a JavaScript object with `JSON.parse()`. ```js const user = JSON.parse(localStorage.getItem('user')); console.log(user.name); // Exibe "amargo85" ``` ##
Checking if localStorage is available
Not all browsers or configurations allow the use of localStorage. It is therefore good practice to check that it is available before attempting to use it. ```js if (typeof(Storage) !== "undefined") { // localStorage is available console.log("localStorage is available"); } else { // localStorage is not available console.log("localStorage is not available"); } ``` ##
Limitations of localStorage
- Limited size: Most browsers allow you to store up to 5MB of data in localStorage. - Synchronization: localStorage is not a suitable solution for data that needs to be synchronized between different tabs or windows, as it does not trigger automatic events when updated. - Asynchronous access: localStorage works synchronously, which can cause the UI to crash if used with large amounts of data. ##
Tips for mastering:
- Automatic cleanup: Don't forget to remove old or unnecessary data so it doesn't accumulate. - Secure storage: Never store sensitive data such as passwords directly in localStorage, as they can be accessed via the console. - Change events: Use the storage event to react to changes in localStorage between different tabs or windows. ```js window.addEventListener('storage', (event) => { console.log('localStorage foi alterado:', event); }); ``` I hope this post will help you understand javascript localstorage better. Let me know in the comments or even [join our javascript room](https://chat-to.dev/chat?q=javascript-room) and we can have a nice chat about it.
How to store data there
To store data in `localStorage`, you use the `setItem()` method. It accepts two arguments: the key and the value you want to store. ```js localStorage.setItem('username', 'amargo85'); ``` In this example, the key is `“username”` and the associated value is `“amargo85”`. ##
Recover data from localstorage
```js const username = localStorage.getItem('username'); console.log(username); // Exibe "amargo85" ``` If the key doesn't exist, the `getItem()` method returns `null`. ##
Removing data from localStorage
To remove a specific item from `localStorage`, use the `removeItem()` method. ```js localStorage.removeItem('username'); ``` This code will remove the `“username”` key and its associated value. ##
Removing all data
If you want to clear all the data stored in `localStorage`, use the `clear()` method. ```js localStorage.clear(); ``` This command removes all stored key/value pairs. ##
Manipulating objects
localStorage only accepts values as strings. Therefore, if you want to store an object, you must first convert it to a JSON string with JSON.stringify(). Example: Storing an object ```js const user = { name: 'amargo85', age: 35 }; localStorage.setItem('user', JSON.stringify(user)); ``` **Retrieving the object** To retrieve the object, you must convert it back to a JavaScript object with `JSON.parse()`. ```js const user = JSON.parse(localStorage.getItem('user')); console.log(user.name); // Exibe "amargo85" ``` ##
Checking if localStorage is available
Not all browsers or configurations allow the use of localStorage. It is therefore good practice to check that it is available before attempting to use it. ```js if (typeof(Storage) !== "undefined") { // localStorage is available console.log("localStorage is available"); } else { // localStorage is not available console.log("localStorage is not available"); } ``` ##
Limitations of localStorage
- Limited size: Most browsers allow you to store up to 5MB of data in localStorage. - Synchronization: localStorage is not a suitable solution for data that needs to be synchronized between different tabs or windows, as it does not trigger automatic events when updated. - Asynchronous access: localStorage works synchronously, which can cause the UI to crash if used with large amounts of data. ##
Tips for mastering:
- Automatic cleanup: Don't forget to remove old or unnecessary data so it doesn't accumulate. - Secure storage: Never store sensitive data such as passwords directly in localStorage, as they can be accessed via the console. - Change events: Use the storage event to react to changes in localStorage between different tabs or windows. ```js window.addEventListener('storage', (event) => { console.log('localStorage foi alterado:', event); }); ``` I hope this post will help you understand javascript localstorage better. Let me know in the comments or even [join our javascript room](https://chat-to.dev/chat?q=javascript-room) and we can have a nice chat about it.
You must log in or register to comment.