Javascript Challenge : LocalStorage API

Javascript Challenge : LocalStorage API

This is another challenge in Javascript where you have to make use of LocalStorage api. Please do checkout my previous video about localStorage to learn more about it.

This is another challenge in Javascript where you have to make use of LocalStorage api. Please do checkout my previous video about localStorage to learn more about it.

Subscribe: https://www.youtube.com/c/FWAIT/featured

Source Code


window.addEventListener('load', showAll);

function setStorage(){
    const name = document.querySelector('#name').value;
    const age = document.querySelector('#age').value;
    localStorage.setItem(name, age);
    showAll();
}

function showAll(){
    document.querySelector('ol').innerHTML = '';

    const keys = Object.keys(localStorage);

    keys.forEach(name =>{
        let element = document.createElement('li');

        let age = localStorage.getItem(name);
        let detail = document.createTextNode(`${name}: ${age}`);
        element.appendChild(detail);
        document.querySelector('ol').appendChild(element);
    });
}

function clearStorage(){
    localStorage.clear();
    showAll();
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>

    <div>
        <input type="text" placeholder="name" id="name">
        <input type="text" placeholder="age" id="age">
        <button onclick="setStorage()">ADD</button>
        <button onclick="clearStorage()">CLEAR</button>
    </div>

    <ol></ol>
     <script src="script.js"></script>
</body>

</html>

js javascript

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

What are the differences between the various JavaScript frameworks? E.g. Vue.js, Angular.js, React.js

What are the differences? Do they each have specific use contexts?

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

Hire dedicated JavaScript Developers who are proficient in AngularJS, ReactJS, NodeJS, & VueJS frameworks. Get flexible hiring models as per your business requirements.

Ember.js vs Vue.js - Which is JavaScript Framework Works Better for You

In this article we will discuss full details and comparison of both Ember.js and Vue.js

Grokking Call(), Apply() and Bind() Methods in JavaScript

In this article, we will have a look at the call(), apply() and bind() methods of JavaScript. Basically these 3 methods are used to control the invocation of the function.