HTML Tutorial

The language for building web pages.

HTML Web Storage

HTML Web Storage API

With web storage, web applications can store data locally within the user browser. Before HTML5, data had to be stored in cookies. Web storage is more secure, faster, and can store more data (5MB vs 4KB for cookies).

Two Types:

localStorage - Stores data with no expiration date. Data is NOT deleted when browser is closed.
sessionStorage - Stores data for ONE session. Data is deleted when browser tab is closed.

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<body>
  <h2>Web Storage Demo</h2>

<input id="nameInput" type="text" placeholder="Enter your name" 
         style="padding:8px; border:1px solid #ccc; border-radius:5px; width:200px;">
  <button onclick="saveName()" style="padding:8px 15px; background:#4e54c8; color:white; border:none; border-radius:5px; cursor:pointer; margin:5px;">Save</button>
  <button onclick="loadName()" style="padding:8px 15px; background:#28a745; color:white; border:none; border-radius:5px; cursor:pointer;">Load</button>
  <button onclick="clearName()" style="padding:8px 15px; background:#dc3545; color:white; border:none; border-radius:5px; cursor:pointer;">Clear</button>

Result

Topics