localStorage و sessionStorage

ذخیره‌سازی داده در مرورگر با localStorage و sessionStorage

گاهی نیاز است اطلاعاتی مثل تنظیمات کاربر، آخرین جست‌وجو، یا وضعیت یک فرم نیمه‌تکمیل، حتی پس از بستن یا رفرش صفحه حفظ شود. جاوااسکریپت برای این منظور دو ابزار ساده و در دسترس ارائه می‌دهد: localStorage و sessionStorage، که هر دو بخشی از Web Storage API هستند و امکان ذخیره‌ی داده به‌صورت جفت کلید-مقدار را در خود مرورگر فراهم می‌کنند، بدون نیاز به هیچ درخواست سمت سرور.

تفاوت اصلی: طول عمر داده

تفاوت اساسی این دو ابزار، مدت زمانی است که داده در آن‌ها باقی می‌ماند:

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

هر دو ابزار API کاملاً یکسانی دارند و تنها تفاوتشان در طول عمر داده است؛ به همین دلیل هر آنچه در ادامه درباره‌ی localStorage گفته می‌شود، دقیقاً به همان شکل روی sessionStorage نیز قابل استفاده است.

متدهای اصلی: ذخیره، خواندن و حذف

کار با این ابزارها از طریق چهار متد ساده انجام می‌شود:

// ذخیره‌ی مقدار
localStorage.setItem("theme", "dark");

// خواندن مقدار
console.log(localStorage.getItem("theme")); // "dark"

// حذف یک مقدار مشخص
localStorage.removeItem("theme");

console.log(localStorage.getItem("theme")); // null

// پاک‌کردن تمام داده‌های ذخیره‌شده در این دامنه
localStorage.clear();

اگر کلیدی وجود نداشته باشد، getItem مقدار null برمی‌گرداند، نه خطا؛ به همین دلیل همیشه باید پیش از استفاده از مقدار بازگشتی، بررسی شود که آیا مقدار واقعاً موجود بوده یا نه.

محدودیت مهم: فقط رشته

یکی از نکات کلیدی که بسیاری از تازه‌کارها با آن اشتباه می‌کنند این است که Web Storage فقط رشته ذخیره می‌کند. اگر شیء یا آرایه مستقیماً پاس داده شود، جاوااسکریپت آن را به‌طور خودکار و اغلب ناخواسته به رشته تبدیل می‌کند:

const user = { name: "سارا", age: 28 };

localStorage.setItem("user", user);
console.log(localStorage.getItem("user")); // "[object Object]"

برای ذخیره‌ی صحیح داده‌های ساختاریافته، باید از JSON.stringify پیش از ذخیره و JSON.parse پس از خواندن استفاده کرد:

const user = { name: "سارا", age: 28 };

localStorage.setItem("user", JSON.stringify(user));

const storedUser = JSON.parse(localStorage.getItem("user"));
console.log(storedUser.name); // "سارا"

نکات کلیدی

• localStorage داده را تا پاک‌سازی دستی نگه می‌دارد؛ sessionStorage فقط تا بسته‌شدن تب.
• هر دو ابزار فقط مقادیر رشته‌ای را ذخیره می‌کنند و برای داده‌های ساختاریافته باید از JSON.stringify و JSON.parse استفاده کرد.
• متد getItem برای کلیدهای ناموجود، مقدار null برمی‌گرداند، نه خطا.
• داده‌های localStorage بین تمام تب‌های باز از همان دامنه مشترک است، اما sessionStorage مختص هر تب است.

جمع‌بندی

localStorage و sessionStorage راهی ساده و سریع برای ذخیره‌ی داده در سمت کاربر فراهم می‌کنند، بدون نیاز به درگیر شدن با درخواست‌های شبکه. تفاوت اصلی این دو در طول عمر داده است، در حالی که API هر دو کاملاً یکسان است. نکته‌ای که همیشه باید در نظر داشت، محدودیت ذخیره‌سازی فقط به‌صورت رشته است که با ترکیب JSON.stringify و JSON.parse به‌راحتی قابل مدیریت است.