HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>sessionStorage — remove and clear</title>
</head>
<body>
  <h1>Remove session data</h1>
  <p>Keys in this tab: <b id="keys">(none)</b></p>
  <button type="button" id="addBtn">Add sample keys</button>
  <button type="button" id="removeBtn">removeItem('username')</button>
  <button type="button" id="clearBtn">clear() all</button>
  <pre id="log"></pre>

  <script>
    function showKeys() {
      var list = [];
      for (var i = 0; i < sessionStorage.length; i++) {
        list.push(sessionStorage.key(i));
      }
      document.getElementById('keys').textContent =
        list.length ? list.join(', ') : '(none)';
    }

    function log(msg) {
      document.getElementById('log').textContent += msg + '\n';
    }

    document.getElementById('addBtn').onclick = function () {
      sessionStorage.setItem('username', 'Alex');
      sessionStorage.setItem('theme', 'dark');
      showKeys();
      log('Added username and theme.');
    };

    document.getElementById('removeBtn').onclick = function () {
      sessionStorage.removeItem('username');
      showKeys();
      log('Removed username.');
    };

    document.getElementById('clearBtn').onclick = function () {
      sessionStorage.clear();
      showKeys();
      log('Cleared all sessionStorage in this tab.');
    };

    showKeys();
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Session Storage — Loop Keys