`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. ## <br>How to store data there<hr> 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”`. ## <br>Recover data from localstorage<hr> ```js const username = localStorage.getItem('username'); console.log(username); // Exibe "amargo85" ``` If the key doesn't exist, the `getItem()` method returns `null`. ## <br>Removing data from localStorage<hr> 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. ## <br>Removing all data<hr> 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. ## <br>Manipulating objects<hr> 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" ``` ## <br>Checking if localStorage is available<br> 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"); } ``` ## <br>Limitations of localStorage<hr> - 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. ## <br>Tips for mastering:<hr> - 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.