Web storage Part 1: Local storage

📢 Introduction:

Local storage is a type of web storage that is used to store data persistently on a user's device (browser). The ideal use case is to store non-sensitive information like - to store users' shopping cart details, so users can see their cart items without being logged in, to store light/dark themes, etc.

⚡Features:

• Operations: The web browser exposes localStorage API through which we can perform the following operations:

  1. setItem - To set some data inside the local storage

  2. getItem - To retrieve data from the local storage

  3. removeItem - To remove data from the local storage

  4. clear - To clear all the items from the local storage

• Size Limit: By default, we can store up to 5 MB of data inside local storage across the same origin. Example: https://www.google.com and https://www.twitter.com would have two separate local storages each having a max size of 5 MB.

• Performance: Operations on local storage are synchronous, so we need to be mindful about storing any large dataset inside the local storage which can potentially impact performance since it can block the main thread.

• Data Persistence: The data stored in the web browser is persisted across tabs, sessions, and page reloads. However, it does not persist across different browsers.

• Data Expiry: The data inside the local storage lives until it is explicitly cleared manually from the browser or by the application.

• Data Structure: The data is stored in the format of a key-value pair similar to a hashmap. The value is a string. If we want to store any complex types like an array or object, we would need to stringify it before storing it inside the local storage.

  Note: If we want to store any numerical value inside the local storage, it will be stored as a string, so on retrieval, we would want to parse it as a number.

• When to use: To store data that is non-sensitive like storing users' shopping cart items, so user can see their cart even if they're not logged in. Storing light/dark theme preference of the user, etc.

• When not to use: Anything that is sensitive should be avoided inside the local storage like an auth token, since it can be vulnerable to various attacks like XSS, CSRF, etc. Larger datasets should be avoided, since we can store up to 5 MB of data, anything larger than that would be lost.

✨ Conclusion:

• Local storage is a storage mechanism provided by the web browser to store data up to 5 MB inside the browser.

• Browser exposes window.localStorage API to perform insert, get, delete, and remove items inside the local storage

• Data inside the local storage is persisted across page reloads, browser sessions, and tabs.

If you liked this article, feel free to like, comment or share! You can connect with me on Linkedin - https://www.linkedin.com/in/vinit-raut or checkout my portfolio website - https://www.vinitraut.com

Thanks for reading, have a great day!