Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

JavaScript Storage & BOM

JavaScript localStorage

Written by Published

localStorage saves data in the browser that survives closing the page.

It belongs to one website, so one site cannot read another's data.

There is no expiry; it stays until removed.

Example

Example

javascript

localStorage.setItem("name", "Ada");

console.log(localStorage.getItem("name"));

The output is Ada.

The Basic Methods

setItem(key, value) saves a value.

getItem(key) reads it back, or null if missing.

removeItem(key) and clear() delete it.

Syntax

Syntax

javascript

localStorage.setItem("key", "value");
localStorage.getItem("key");

Every value is stored as a string.

Everything Is a String

A number is converted to a string automatically when saved.

Reading it back gives text, not the original type.

Example

Example

javascript

localStorage.setItem("count", 42);

const value = localStorage.getItem("count");

console.log(typeof value);
console.log(value === "42");

Convert with Number if you need the value back as a number.

A Missing Key

Reading a key that was never set gives null, not an error.

Example

Example

javascript

localStorage.clear();

console.log(localStorage.getItem("missing"));

Always check for null before using the result.

Removing a Value

removeItem deletes one key without touching the rest.

Example

Example

javascript

localStorage.setItem("a", "1");
localStorage.setItem("b", "2");

localStorage.removeItem("a");

console.log(localStorage.getItem("a"));
console.log(localStorage.getItem("b"));

Only the named key was removed.

Clearing Everything

clear() removes every key the site has saved.

Example

Example

javascript

localStorage.setItem("a", "1");
localStorage.setItem("b", "2");

localStorage.clear();

console.log(localStorage.length);

The output is 0.

It Is Synchronous

Every call blocks until it finishes, unlike most modern browser storage.

For small amounts of data this is not a problem.

Example

Example

javascript

localStorage.setItem("theme", "dark");

const theme = localStorage.getItem("theme");

console.log(theme);

No await is needed.

Complete Example

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript localStorage</title>
</head>
<body>

  <h1>localStorage</h1>

  <input id="name" placeholder="Your name">
  <button id="save">Save</button>

  <p id="out"></p>

  <script>
    const out = document.getElementById("out");
    const saved = localStorage.getItem("visitorName");

    out.textContent = saved ? "Welcome back, " + saved : "No name saved yet";

    document.getElementById("save").addEventListener("click", function () {
      const value = document.getElementById("name").value;
      localStorage.setItem("visitorName", value);
      out.textContent = "Saved: " + value;
    });
  </script>

</body>
</html>

Try It Yourself

Run the above example in the Try It Editor.

Try reloading:

Save a name, reload the page, and see it remembered.

Important Points

  • localStorage persists until explicitly removed.
  • It belongs to one website only.
  • Every value is stored as a string.
  • A missing key gives null.
  • It works synchronously.

Conclusion

localStorage is the simplest way to remember something between visits.

Remembering that values are always strings avoids a common bug.

For anything larger or more structured, other storage options exist.

PreviousJavaScript Regex in PracticeNextJavaScript sessionStorage