Storing data in a web browser

Storing data in a web browser can be achieved using various techniques, and one common method is to use the localStorage API in JavaScript.

1. Storing and Retrieving Simple Data:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Storing Data in localStorage</title>
</head>
<body>
    <input type="text" id="userData" placeholder="Enter your data">
    <button onclick="saveData()">Save Data</button>

    <script>
        // Function to save data to localStorage
        function saveData() {
            // Accessing the input element
            var userInput = document.getElementById('userData').value;

            // Storing the data in localStorage
            localStorage.setItem('userInput', userInput);

            alert('Data saved successfully!');
        }

        // Function to retrieve and display data from localStorage
        function displayData() {
            var savedData = localStorage.getItem('userInput');

            // Displaying the data in an alert 
           // (you can modify this to display in a different way)
            alert('Saved Data: ' + savedData);
        }

        // Call the displayData function to show any saved data on page load
        displayData();
    </script>
</body>
</html>

In this example, we have an input field for the user to enter data. When the "Save Data" button is clicked, the entered data is stored in the localStorage under the key 'userInput'. We also have a displayData function that retrieves the data from localStorage and displays it.

2. Storing and Retrieving Objects:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Storing Objects in localStorage</title>
</head>
<body>
    <button onclick="saveObject()">Save Object</button>

    <script>
        // Function to save an object to localStorage
        function saveObject() {
            var user = {
                name: 'John Doe',
                age: 25,
                email: '[email protected]'
            };

            // Storing the object in localStorage 
           // (converted to a string using JSON.stringify)
            localStorage.setItem('userObject', JSON.stringify(user));

            alert('Object saved successfully!');
        }

        // Function to retrieve and display an object from localStorage
        function displayObject() {
            var savedObject = localStorage.getItem('userObject');

            // Parsing the string back to an object using JSON.parse
            var parsedObject = JSON.parse(savedObject);

            // Displaying the object in an alert 
            // (you can modify this to display in a different way)
            alert('Saved Object: ' + JSON.stringify(parsedObject));
        }

        // Call the displayObject function to show any saved object on page load
        displayObject();
    </script>
</body>
</html>

In this example, we store and retrieve an object in localStorage. We use JSON.stringify to convert the object to a string before storing it, and JSON.parse to convert it back to an object when retrieving it.