What is local storage in javascript?
The API called Web Storage provides two basic mechanisms for storing information in the user’s browser: sessionStorage and localStorage. Show
The sessionStorage (which we won’t get into in this article), works very much like the localStorage, but with one difference: it keeps the saved data only until the end of the user session, i.e. until the user’s browser closes, including page reloads or restores. Photo by Markus Spiske on UnsplashThe localStorage keeps the saved data even if the browser is closed and reopened. This makes it easier to create some interface behavior during user use. And obviously, needless to say, it is not for saving sensitive data. The data storage structure is quite simple, consisting of the key-value pair. An example: { To work with this data, you can do basically 4 actions, using 4 methods:
There is a method called Opening localStorage in the browserTo see all the data saved in your browser’s localStorage, simply inspect the page, click on the Application tab, and then, in the sidebar, click on Local Storage (path using Chrome or browsers that use the Chromium engine): Saving data: localStorage.setItem( )This method allows you to save the values inside the localStorage in the user’s browser. Open the console in your browser and execute the following command: localStorage.setItem("name", "Jack Sparrow"); Now open the Application tab, go to where the localStorages are stored and click on “http://medium.com". You will see our name: "Jack Sparrow" saved.
Now that we saved the value in the user’s browser, we will now retrieve it using the Recovering data: localStorage.getItem( )Working much like setItem( ), we will use getItem( ) to retrieve the value of a previously saved key. In our case, we will use it to get the name key that we saved in the setItem( ) example. Execute the following command in your console to see the stored value: localStorage.getItem("name"); Removing data: localStorage.removeItem( )After we no longer use this data, it's a good practice to delete it from the localStorage to avoid unnecessary data accumulation. The The Execute the following command in your console to delete a pair and then open the application tab to see if it's removed: localStorage.removeItem("name"); Cautions, security and limitations
So ideally you should use localStorage for situations where you want to store data that can be public, that is not sensitive, that will not be used in more complex apps, that is no larger than 5MB, and that is strings. For simple UI things, where it doesn’t make much sense to store something in the database or somewhere more permanent, it is nice to use localStorage. If you are creating a SPA or any site/system and want a little independence from the server, the use of localStorage is adequate and breaks a lot of steam. ConclusionThat’s it for today. I hope this article helped you with your web development journey. Thanks for reading! Follow me in this platform to reed more developer content. Have a great day, see you soon! 👋 Go composable: Build apps faster like LegoBit is an open-source tool for building apps in a modular and collaborative way. Go composable to ship faster, more consistently, and easily scale. → Learn more Build apps, pages, user-experiences and UIs as standalone components. Use them to compose new apps and experiences faster. Bring any framework and tool into your workflow. Share, reuse, and collaborate to build together. Help your team with: → Micro-Frontends → Design Systems → Code-Sharing and reuse → Monorepos Learn moreWhat is local storage in JavaScript example?The localStorage object stores data with no expiration date. The data is not deleted when the browser is closed, and are available for future sessions.
What does local storage mean?Definition: Local storage is the process of storing digital data on physical storage devices, such as hard disc drives (HDDs), solid state drives (SSDs), or external storage devices, such as thumb drives or discs.
Where is JavaScript localStorage stored?Firefox stores localstorage in webappsstore. sqlite file in the profile folder.
What is local storage and session storage in JavaScript?localStorage - stores data with no expiration date. window. sessionStorage - stores data for one session (data is lost when the browser tab is closed)
|