Untitled

<!DOCTYPE html>
<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Work+Sans:300" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
    <link href="styling.css" rel="stylesheet" type="text/css">
    <meta charset="utf-8">
    <title>Localstorage</title>
    <style>
        .input {
            padding: 10px;
        }
        #text, #output {
            color: whitesmoke;
        }
    </style>
</head>

<body>
    <header>
        <div class="container">
            <a href="index.html">
            <img src="../../../assets/images/logo.png" alt="logo" class="logo">
            </a>
            <nav>
                <li><a href="../../../index.html">Home</a></li>
                    <li><a href="../../../about.html">About</a></li>
                    <li><a href="../../../tasks.html">Tasks</a></li>
                    <li><a href="../../../guestbook.html">Gjestebok</a></li>
            </nav>
        </div>
    </header>


    <div id="innhold">
        <div id="main">
            <center><br>
                <div class="tableborder">
                <br><br>
                    <legend id="text">Sett inn data</legend>
                    <input class="input" id="inpKey" type="text" placeholder="Sett inn"><br>
                    <input class="input" id="inpVerdi" type="text" placeholder="Sett inn verdi"><br>
                    <button class="button" id="btninsert">Send inn data</button>
                <br><br>
                    <legend id="text">Lagret informasjon vises her</legend>
                    <div id="output"></div>
                <br>
                <button class="button" id="btnclear">Reset tabell</button>
                </div>
            </center>
            <script>
if (sessionStorage.length == 0) {
  document.getElementById("output").innerHTML = "Det har ikke blitt lagret noe informasjon ennå.";
}

btnclear.onclick = function(){
  sessionStorage.clear();
  location.reload();
}

const output = document.getElementById("output");

btninsert.onclick = function(){
  const key = inpKey.value;
  const verdi = inpVerdi.value;

  if (key && verdi) {
    sessionStorage.setItem(key, verdi);
    location.reload();
  }

  }


for (let i = 0; i < sessionStorage.length; i++) {
  const key = sessionStorage.key(i);
  const verdi = sessionStorage.getItem(key);

  output.innerHTML += `${key}: ${verdi}<br />`;
}

</script>
        </div>
    </div>

</body>

</html>