javascriptWeb Storageذخیره‌سازی مرورگر در جاوااسکریپت
ذخیره‌سازی مرورگر در جاوااسکریپت را با localStorage و sessionStorage بیاموزید؛ مقدار متنی، JSON، نبود کلید و مدیریت خطای دسترسی و ظرفیت.
مفهوم به زبان ساده
Web Storage یک فضای کلید و مقدار در مرورگر است. localStorage معمولاً میان بارگذاری‌های صفحه باقی می‌ماند؛ sessionStorage به نشست صفحه در زبانه وابسته است. هر دو به مبدأ سایت مربوط‌اند و تضمین نگهداری همیشگی داده نیستند. کاربر یا مرورگر می‌تواند داده را پاک کند و محدودیت محیط، دسترسی را ببندد.
کلیدها و مقدارها متن هستند. برای یک شیء ساده، JSON.stringify متن می‌سازد و هنگام خواندن، JSON.parse مقدار را برمی‌گرداند. getItem برای کلید ناموجود null می‌دهد، پس باید نبود داده را پیش از parse مدیریت کنید. تجزیهٔ موفق نیز معتبر بودن فیلدها را تضمین نمی‌کند. در نمونه، کلیدی تصادفی مخصوص همان تمرین انتخاب می‌کنیم تا تنظیمات قبلی سایت بازنویسی نشود.
دسترسی یا نوشتن ممکن است به دلیل سیاست محیط یا ظرفیت شکست بخورد؛ try/catch مسیر شکست را مشخص می‌کند. finally فقط همان کلید تمرین را حذف می‌کند و clear فراخوانی نمی‌شود. این فضا محل رمز یا مجوز قابل اعتماد نیست؛ کدهای همان مبدأ می‌توانند به داده دسترسی داشته باشند. برای تمرین، شکل یک تنظیم کوچک را تعریف کنید و بگویید اگر ذخیره ممکن نبود، رابط چگونه بدون ازبین‌بردن ورودی به کار ادامه می‌دهد.
کجا به کار می‌آید؟
- نگهداری یک تنظیم نمایشی کوچک با امکان ادامه بدون ذخیره
- ذخیرهٔ پیش‌نویس آموزشی با قرارداد نسخه و بررسی دادهٔ برگشتی
از تعریف تا یک مثال واقعی
const key = `darsavand:codex-demo:${crypto.randomUUID()}`;
let store;
try {
store = localStorage;
store.setItem(key, JSON.stringify({ theme: 'light' }));
const raw = store.getItem(key);
if (raw === null) throw new Error('Missing demo data');
console.log(JSON.parse(raw).theme);
} catch {
console.log('ذخیره‌سازی در دسترس نیست');
} finally {
try { store?.removeItem(key); } catch {}
}
light
این مثال چطور کار می‌کند؟
کلید تصادفی، دادهٔ قبلی سایت را هدف نمی‌گیرد.
شیء به متن JSON تبدیل و سپس دوباره خوانده می‌شود.
در مسیر موفق light چاپ می‌شود؛ finally فقط کلید همین نمونه را حذف می‌کند.
اشتباه رایج
ذخیره‌کردن مستقیم شیء، متن JSON معتبر نمی‌سازد. clear نیز همهٔ کلیدهای آن فضا را پاک می‌کند؛ برای پاک‌سازی نمونه فقط removeItem کلید خود را به کار ببرید.
این را به خاطر بسپارید
ذخیرهٔ مرورگر می‌تواند شکست بخورد و دادهٔ برگشتی قابل اعتماد نیست؛ مرز متن، قرارداد و مسیر جایگزین را روشن نگه دارید.