Question

Question #309250

Remove Item in Local Storage

The goal of this coding exam is to quickly get you off the ground with

Remove Item In Localstorge

Use the below reference image

https://assets.ccbp.in/frontend/content/dynamic-webapps/removeItem-in-localStorage-op.gif

HTML

<!DOCTYPE html>

<html>

<body>

<p>Hello, <span id="name">Varun</span>!</p>

<p>Update your Name</p>

<br />

Save to Local Storage

</button>

<button class="btn-secondary reset-button" id="resetBtn">Reset</button>

</div>

</body>

</html>

Expert's answer

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
    <div class="display-username text-center">
        <p>Hello, <span id="name">Varun</span>!</p>
        <p>Update your Name</p>
        <input id="inputValue" placeholder="Write your name here" />
        <br />
        <button class="btn-primary save-button" id="saveBtn">Save to Local Storage</button>
        <button class="btn-secondary reset-button" id="resetBtn">Reset</button>
    </div>


    <script>
        let name = document.getElementById('name');
        let inputValue = document.getElementById('inputValue');
        let saveBtn = document.getElementById('saveBtn');
        let resetBtn = document.getElementById('resetBtn');


        saveBtn.onclick = () => {
            localStorage.setItem('name', inputValue.value);
            name.innerText = inputValue.value;
        };


        resetBtn.onclick = () => {
            localStorage.setItem('name', 'Varun');
            name.innerText = 'Varun';
        };


        document.addEventListener("DOMContentLoaded", () => {
            name.innerText = localStorage.getItem('name');
        });
    </script>
</body>
</html>

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!