ذخیره‌سازی در مرورگر 💾

اطلاعات کاربر رو روی سیستم خودش ذخیره می‌کنیم تا یادش نره!

`localStorage`: حافظه بلندمدت مرورگر

`localStorage` مثل یه گاوصندوق کوچیک تو مرورگره. هرچیزی توش بذاری، تا ابد (یا تا وقتی که کاربر خودش پاکش کنه) همونجا می‌مونه. حتی اگه مرورگر رو ببنده و فردا برگرده! برای ذخیره کردن تنظیمات کاربر (مثلاً تم تاریک) یا سبد خرید عالیه.

// ذخیره کردن یه آیتم
localStorage.setItem('username', 'ali_reza');

// خوندن یه آیتم
const savedUsername = localStorage.getItem('username');
console.log(savedUsername); // خروجی: "ali_reza"

// پاک کردن یه آیتم
localStorage.removeItem('username');

// پاک کردن همه چی!
localStorage.clear();

`sessionStorage`: حافظه کوتاه‌مدت

`sessionStorage` دقیقاً مثل `localStorage` کار می‌کنه، با یه تفاوت مهم: اطلاعاتش فقط تا وقتی که اون تب مرورگر بازه، باقی می‌مونه. به محض اینکه کاربر تب رو ببنده، همه چی می‌پره!

// ذخیره کردن یه آیتم
sessionStorage.setItem('temporaryData', 'این اطلاعات موقتیه!');

// خوندن آیتم
const tempData = sessionStorage.getItem('temporaryData');
console.log(tempData);

ذخیره کردن آبجکت‌ها و آرایه‌ها

یه نکته مهم: `localStorage` فقط می‌تونه متن (String) ذخیره کنه. اگه بخوایم یه آبجکت یا آرایه رو ذخیره کنیم، باید اول با `JSON.stringify()` تبدیلش کنیم به متن و موقع خوندن، با `JSON.parse()` دوباره برش گردونیم به حالت اولش.

const userSettings = {
  theme: 'dark',
  notifications: true
};

// تبدیل به متن و ذخیره
localStorage.setItem('settings', JSON.stringify(userSettings));

// خوندن و تبدیل دوباره به آبجکت
const savedSettings = JSON.parse(localStorage.getItem('settings'));
console.log(savedSettings.theme); // خروجی: "dark"

تمرین! 🧠

یه اینپوت و دو تا دکمه "ذخیره" و "بارگذاری" بساز. کاری کن که کاربر بتونه یه متن رو تو اینپوت بنویسه و با زدن دکمه "ذخیره"، متنش تو `localStorage` ذخیره بشه. با زدن دکمه "بارگذاری"، متنی که ذخیره شده بود دوباره تو اینپوت نمایش داده بشه.

جواب تمرین

<!-- HTML -->
<input type="text" id="note-input" placeholder="یادداشت...">
<button id="save-btn">ذخیره</button>
<button id="load-btn">بارگذاری</button>

<!-- JavaScript -->
<script>
  const noteInput = document.getElementById('note-input');
  const saveBtn = document.getElementById('save-btn');
  const loadBtn = document.getElementById('load-btn');

  saveBtn.addEventListener('click', () => {
    localStorage.setItem('userNote', noteInput.value);
    alert('یادداشت ذخیره شد!');
  });

  loadBtn.addEventListener('click', () => {
    noteInput.value = localStorage.getItem('userNote');
  });
</script>

درس قبلی

درس ۱۱ از ۱۶

درس بعدی: API و Fetch