HTML Code

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

  <script>
    function showKeys() {
      var list = [];
      for (var i = 0; i < localStorage.length; i++) {
        list.push(localStorage.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 () {
      localStorage.setItem('username', 'Alex');
      localStorage.setItem('theme', 'dark');
      showKeys();
      log('Added username and theme.');
    };

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

    document.getElementById('clearBtn').onclick = function () {
      localStorage.clear();
      showKeys();
      log('Cleared all localStorage for this origin.');
    };

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

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Local Storage — removeItem & clear