Source Code: (back to article)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Storage API Interactive Demo</title>
</head>
<body>
<h2>localStorage and sessionStorage Demo</h2>
<div style="display: flex; gap: 10px">
<button onclick="storeInLocal()">Store in localStorage</button>
<button onclick="retrieveFromLocal()">Retrieve from localStorage</button>
<button onclick="removeFromLocal()">Remove from localStorage</button>
</div>

<div style="margin: 20px 0" id="localStorageResult"></div>

<div style="display: flex; gap: 10px; margin-top: 10px">
<button onclick="storeInSession()">Store in sessionStorage</button>
<button onclick="retrieveFromSession()">
Retrieve from sessionStorage
</button>
<button onclick="removeFromSession()">Remove from sessionStorage</button>
</div>

<div style="margin-top: 20px" id="sessionStorageResult"></div>

<script>
function storeInLocal() {
localStorage.setItem("demo", "Hi form LocalStorage!");
document.getElementById("localStorageResult").textContent =
"Stored in localStorage: " + localStorage.getItem("demo");
}

function retrieveFromLocal() {
const value = localStorage.getItem("demo") || "Nothing in localStorage";
document.getElementById("localStorageResult").textContent =