Local storage is a useful web development tool that enables developers to save data within the user’s browser. In this article, we’ll look at different features of local storage, starting with beginner-level examples and continuing to more complex techniques. By the end of this guide, you will have a basic understanding of how to successfully use local storage in web applications.

Beginner level Examples on Local storage

1. Storing User Preferences :

    Choose a theme:
    LightDarkMediumSave Preference

    

When the user selects a theme and hits the “Save Preference” button, this code logs the theme to the console. To read this log, open the browser’s developer tools (typically by pressing F12 or right-clicking on the page and selecting “Inspect”) and go to the console tab.(Read More)

2. Remembering User Input :

    Save Input

    

This HTML example generates a simple web page that allows users to enter text into a text field and save it to their browser’s local storage.

When a user types text into the input box and hits the “Save Input” button, the text is saved in the browser’s local storage. This implies that even if users refresh the website or close and reopen the browser, the saved input will remain accessible. The console log and alert notify the user that their input has been successfully saved. (Read More)

3. Shopping Cart Persistence :

    
Shopping Cart
    

This example shows how to save a shopping cart using local storage. Items added to the cart are saved as an array in local storage under the key ‘cart’. When the page loads, the saved cart items are pulled from local storage and shown.

When you click one of the “Add Item X to Cart” buttons, the appropriate item is added to the shopping cart, and the updated cart contents are displayed in the console. To inspect these logs, open the browser’s developer tools (typically by pressing F12 or right-clicking on the page and selecting “Inspect”) and go to the console tab.

You can also view the local storage directly through the browser’s developer tools. Most browsers allow you to do this by right-clicking on the page, selecting “Inspect” to get the developer tools, and then navigating to the “Application” or “Storage” tab. From there, expand the “Local Storage” section to view the website’s key-value pairs. In this example, the key “cart” includes the JSON string representing the saved cart items.
Read full article - Mastering Local Storage in Web Development: 8 Practical Examples, From Novice to Expert!

Learn Json- Click Here