🎯 فصل ۱۵: ذخیره‌سازی ساده در مرورگر (localStorage و sessionStorage)

محمد
اموزش جاوا اسکریپت

اموزش رایگان جاوا اسکریپت از مقدماتی تا متوسط

مقدمه

تا حالا احتمالا متوجه شدی که وقتی صفحه وب رو رفرش یا حتی می‌بندیم، بیشتر اطلاعاتی که توی جاوااسکریپت ذخیره کردیم از بین می‌ره.
حالا فرض کن می‌خوای اطلاعاتی مثل نام کاربری، رنگ تم سایت، یا سبد خرید رو ماندگار نگه‌داری – حتی وقتی کاربر صفحه رو می‌بنده!
اینجاست که سر و کله‌ی Local Storage و Session Storage پیدا میشه.

localStorage و sessionStorage چیه؟

localStorage:
اطلاعات رو تا زمانی که خودت پاکشون نکنی روی مرورگر نگه می‌داره (حتی بعد از بستن مرورگر).
مثل یک انباری دائمی!
sessionStorage:
اطلاعات رو تا زمانی نگه می‌داره که تب یا صفحه رو نبستی. به محض بستن صفحه اطلاعات پاک میشن.
مثل یک کیف دستی موقتی!

ساختار کلی کار با localStorage و sessionStorage

هر دوشون شبیه هم کار می‌کنن و اطلاعات رو به صورت «کلید-مقدار» (key-value) ذخیره می‌کنن. مقدار هم همیشه به صورت رشته (string) ذخیره میشه.

مثال‌های ساده و کاربردی

۱. ذخیره‌سازی یک مقدار (Set)

localStorage.setItem("username", "ali1370");
sessionStorage.setItem("token", "12345token");

۲. خواندن مقدار ذخیره‌شده (Get)

let user = localStorage.getItem("username");
console.log(user); // خروجی: ali1370

let token = sessionStorage.getItem("token");
console.log(token); // خروجی: 12345token

۳. پاک کردن یک کلید خاص

localStorage.removeItem("username");
sessionStorage.removeItem("token");

۴. پاک کردن همه داده‌ها

localStorage.clear();
sessionStorage.clear();

مثال عملی: ذخیره نام کاربر

فرض کن در فرم، کاربر اسم خودش رو وارد می‌کند. این اسم تا همیشه در حافظه مرورگر بماند و اگر صفحه را بست، دوباره نمایش داده شود:

<input id="nameInput" placeholder="اسم خودت رو وارد کن">
<button onclick="saveName()">ذخیره نام</button>
<p id="welcome"></p>

<script>
function saveName() {
  let name = document.getElementById('nameInput').value;
  localStorage.setItem("name", name);
  document.getElementById('welcome').textContent = 'سلام ' + name + '!';
}

// وقتی صفحه بارگذاری شد...
window.onload = function() {
  let storedName = localStorage.getItem("name");
  if(storedName){
    document.getElementById('welcome').textContent = 'سلام ' + storedName + '!';
  }
}
</script>

نکته: ذخیره اشیاء و آرایه‌ها

چون فقط رشته ذخیره میشه، باید با JSON.stringify() تبدیل به رشته کنی و موقع خواندن با JSON.parse() برش گردونی.

let user = {name: "Ali", age: 22};
localStorage.setItem("profile", JSON.stringify(user));
// ...
let profile = JSON.parse(localStorage.getItem("profile"));
console.log(profile.name); // خروجی: Ali

📌 تفاوت‌های اصلی localStorage و sessionStorage

ویژگی	localStorage	sessionStorage
زمان حذف	تا حذف نکنی می‌مونه	با بستن تب/صفحه حذف میشه
حجم تقریبی	5MB	5MB
دسترسی	همه تب‌ها و پنجره‌ها	فقط همین تب فعلی

🔰 تمرین عملی: تنظیم و ذخیره رنگ پس‌زمینه به انتخاب کاربر

هدف:
کاربر می‌تواند یک رنگ انتخاب کند. رنگ انتخاب‌شده به‌عنوان پس‌زمینه ذخیره می‌شود و پس از رفرش یا خروج از صفحه، همچنان حفظ خواهد شد.

🎯 راهنما و مراحل

یک input از نوع color (رنگ) در صفحه بگذار.
یک دکمه “ذخیره رنگ” قرار بده.
هر وقت کاربر دکمه را زد، رنگ انتخابی وارد localStorage کن و رنگ پس‌زمینه صفحه را تغییر بده.
وقتی صفحه مجدداً باز شد (یا رفرش شد)، اگر رنگی در localStorage بود آن را به پس‌زمینه صفحه اعمال کن.

💻 کد مثال کامل و ساده

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <title>تمرین ذخیره رنگ با localStorage</title>
</head>
<body>
  <label for="bgColor">رنگ پس‌زمینه را انتخاب کن:</label>
  <input type="color" id="bgColor">
  <button onclick="saveColor()">ذخیره رنگ</button>

  <script>
    // اعمال رنگ ذخیره شده در زمان باز شدن صفحه
    window.onload = function() {
      let storedColor = localStorage.getItem('bgColor');
      if(storedColor) {
        document.body.style.backgroundColor = storedColor;
        document.getElementById('bgColor').value = storedColor;
      }
    }

    function saveColor() {
      let color = document.getElementById('bgColor').value;
      localStorage.setItem('bgColor', color);
      document.body.style.backgroundColor = color;
    }
  </script>
</body>
</html>

⏳ چالش اضافه (اختیاری)

یک دکمه “بازنشانی به پیش‌فرض” اضافه کن که رنگ انتخاب‌شده و localStorage پاک شود و پس‌زمینه به رنگ سفید برگردد.
می‌تونی همین کد ساده رو به عنوان بخشی از یک پروژه بزرگ‌تر مثل تنظیمات پروفایل استفاده کنی!

تمرین سریع:

۱. نام رنگ دلخواه کاربر را گرفته و در localStorage ذخیره کن. هر وقت صفحه رفرش شد، رنگ پس‌زمینه همان رنگ باقی بماند.
۲. یک «سشن» موقت بساز: کاربر وارد سایت شد، پیام خوش‌آمد نمایش بده؛ اما اگر تب رو بست، دفعه بعد دوباره پیام بیاد.

جمع‌بندی

با localStorage و sessionStorage می‌تونی اطلاعات رو سمت مرورگر کاربر ذخیره کنی.
کاری به سرور و بک‌اند نداره، فقط زندگی صفحه توی مرورگر رو بهتر می‌کنه!
بدرد ذخیره تنظیمات، نام کاربری، سبد خرید و … در پروژه‌های ساده می‌خوره.

محمد وب‌سایت