Local Storage

localStorage.setItem("username", "Yasin");

let name = localStorage.getItem("username");
console.log(name); // Yasin

localStorage.setItem("username", "Ahmed"); // يتم استبدال القيمة

localStorage.removeItem("username");

localStorage.clear();

console.log(localStorage.length); // عدد المفاتيح المخزنة

let firstKey = localStorage.key(0);
console.log(firstKey);

localStorage.setItem("user", {name: "Ali"}); // ❌ يخزن [object Object]

let user = { name: "Ali", age: 25 };
localStorage.setItem("user", JSON.stringify(user));

let userData = JSON.parse(localStorage.getItem("user"));
console.log(userData.name); // Ali

let color = document.getElementById("color");
let color1 = document.getElementById("color1");

// Apply stored background color on page load
document.body.style.backgroundColor = localStorage.getItem("color");

// When color button is clicked
color.addEventListener("click", () => {
    window.localStorage.setItem("color", "green");
    document.body.style.backgroundColor = "green";
});

color1.addEventListener("click", () => {
    window.localStorage.setItem("color", "blue");
    document.body.style.backgroundColor = "blue";
});

<input type="text" id="usernameInput" placeholder="اكتب اسمك">
<button onclick="saveName()">💾 حفظ</button>
<button onclick="loadName()">📥 تحميل</button>
<button onclick="deleteName()">🗑️ حذف</button>

<p id="output"></p>

<script>
  function saveName() {
    let name = document.getElementById("usernameInput").value;
    localStorage.setItem("username", name);
    alert("تم الحفظ!");
  }

  function loadName() {
    let name = localStorage.getItem("username");
    document.getElementById("output").innerText = name ?? "لا يوجد اسم محفوظ";
  }

  function deleteName() {
    localStorage.removeItem("username");
    alert("تم الحذف");
  }
</script>