33. Web Storage API (LocalStorage vs SessionStorage)

Explanation

Storage that is many times faster and safer than Cookies:

• LocalStorage: Data kept in it is never deleted unless the user clears the browser history themselves.
• SessionStorage: Data kept in it lasts only as long as that particular tab is open. The data is gone as soon as the tab is closed.
• Syntax: localStorage.setItem("key", "value") and localStorage.getItem("key").

Golden rules

• Only string (Text) data can be stored safely in local storage.

Example code

<!DOCTYPE html>
<html>
<body style="font-family: sans-serif; padding: 20px;">
  <div style="border: 1px solid #cbd5e1; padding: 12px; border-radius: 6px; background: #f8fafc;">
    <h4 style="margin: 0 0 6px 0; color: #0284c7;">The Magic of Local Storage:</h4>
    <input type="text" id="userInput" placeholder="Enter your name..." style="padding: 4px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 12px;">
    <button onclick="save()" style="background: #0284c7; color: white; border: none; padding: 5px 10px; border-radius: 4px; font-size: 12px; cursor: pointer;">Save</button>
    <p id="msg" style="margin: 6px 0 0 0; font-size: 12px; font-weight: bold; color: #059669;"></p>
  </div>
  <script>
    function save() {
      const v = document.getElementById('userInput').value;
      localStorage.setItem('myDemoName', v);
      load();
    }
    function load() {
      const s = localStorage.getItem('myDemoName');
      if (s) document.getElementById('msg').innerText = "Saved name: " + s;
    }
    load();
  </script>
</body>
</html>

Run & edit this in the live editor

Quick quiz

Which API stores data in the browser permanently, without expiry?

1. SessionStorage
2. LocalStorage
3. CookieStorage
4. DataSaver