آموزش localStorage در جاوا اسکریپت: مدیریت کامل ذخیره‌سازی داده در مرورگر

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

فهرست مطالب

LocalStorage چیست و چگونه کار می‌کند؟
مقایسه LocalStorage با سایر روش‌های ذخیره‌سازی
متدهای اصلی LocalStorage همراه با مثال کاربردی
نحوه ذخیره‌سازی اشیاء (Objects) و آرایه‌ها
همگام‌سازی تب‌ها با رویداد storage
محدودیت‌های فنی و نکات حیاتی امنیت
پرسش‌های متداول
راهنمای عیب‌یابی سریع

خلاصه سریع:

ذخیره‌سازی داده‌ها به‌صورت جفت کلید-مقدار (Key-Value) و کاملاً متنی (String).
پایداری داده‌ها پس از بستن مرورگر یا ری‌استارت سیستم.
حجم ذخیره‌سازی معمولاً ۵ مگابایت برای هر مبدأ (Origin).
عملکرد همگام (Synchronous) که می‌تواند روی فریم‌ریت اجرا در حجم بالا تاثیر بگذارد.

LocalStorage چیست و چگونه کار می‌کند؟

پاسخ کوتاه: LocalStorage یک رابط برنامه‌نویسی (API) در مرورگر است که امکان ذخیره داده‌ها به صورت جفت کلید-مقدار متنی را روی رایانه کاربر فراهم می‌کند. این داده‌ها دائمی هستند و با بستن مرورگر یا خاموش شدن سیستم پاک نمی‌شوند.

وقتی شما در یک وب‌سایت تنظیمی مثل تغییر تم به حالت شب (Dark Mode) را انجام می‌دهید، مرورگر باید این تصمیم شما را یادش بماند. LocalStorage بخشی از Web Storage API است که دقیقاً برای همین هدف ساخته شده است. تمام داده‌های ذخیره‌شده در LocalStorage وابسته به پروتکل، دامنه و پورت (Origin) هستند؛ یعنی وب‌سایت A به داده‌های وب‌سایت B دسترسی نخواهد داشت.

برای دسترسی به این ابزار نیازی به نصب هیچ کتابخانه‌ای ندارید و مستقیماً از طریق شیء window.localStorage در اکثر قطعه کدهای جاوا اسکریپت قابل استفاده است.

مقایسه LocalStorage با سایر روش‌های ذخیره‌سازی

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

ویژگی / ابزار	توضیحات و مشخصات
LocalStorage	حجم ۵ مگابایت، بدون تاریخ انقضا، فقط سمت کلاینت، عملکرد همگام.
SessionStorage	حجم ۵ مگابایت، انقضا با بستن تب مرورگر، فقط سمت کلاینت.
Cookie	حجم ۴ کیلوبایت، دارای تاریخ انقضا، ارسال خودکار به سرور همراه با درخواست‌ها.
IndexedDB	حجم بسیار بالا (چندصد مگابایت)، ذخیره داده‌های ساختاریافته، عملکرد ناهمگام (Async).

به‌عنوان مثال، در برنامه‌های وب بزرگ، بهینه‌سازی سرعت صفحه پرداخت نیازمند کاهش درخواست‌های زائد به سرور است و استفاده درست از ذخیره‌سازی محلی برای حفظ پیش‌نویس داده‌ها بدون کند کردن UI به این موضوع کمک می‌کند.

متدهای اصلی LocalStorage همراه با مثال کاربردی

پاسخ کوتاه: LocalStorage شامل ۴ متد اصلی است: setItem() برای ذخیره، getItem() برای خواندن، removeItem() برای حذف یک کلید و clear() برای پاک‌سازی کامل داده‌ها.

برای مدیریت داده‌ها در مرورگر از متدهای زیر استفاده می‌شود:

۱. متد setItem(key, value)

از این متد برای مقداردهی استفاده می‌شود. هر دو پارامتر ورودی باید رشته (String) باشند.

// ذخیره یک کلید و مقدار ساده

localStorage.setItem(‘theme’, ‘dark’);

localStorage.setItem(‘language’, ‘fa’);

۲. متد getItem(key)

برای خواندن مقدار بر اساس کلید استفاده می‌شود. اگر کلید وجود نداشته باشد، مقدار null برمی‌گرداند.

const userTheme = localStorage.getItem(‘theme’);

console.log(userTheme); // خروجی: dark
const unknownKey = localStorage.getItem(‘age’);

console.log(unknownKey); // خروجی: null

۳. متد removeItem(key)

یک کلید مشخص را همراه با مقدار آن از حافظه پاک می‌کند.

localStorage.removeItem(‘language’);

۴. متد clear() و ویژگی length

متد clear() تمام اطلاعات مربوط به دامنه جاری را پاک می‌کند. ویژگی length نیز تعداد کلیدهای موجود را بازمی‌گرداند.

console.log(localStorage.length); // تعداد items

localStorage.clear(); // حذف تمام داده‌ها

نحوه ذخیره‌سازی اشیاء (Objects) و آرایه‌ها

پاسخ کوتاه: چون LocalStorage فقط رشته متنی ذخیره می‌کند، باید داده‌های پیچیده مانند Object و Array را با JSON.stringify() به رشته تبدیل کرده و هنگام دریافت با JSON.parse() مجدداً به داده ساختاریافته تبدیل کنید.

اگر یک Object یا Array را مستقیماً به setItem بدهید، جاوا اسکریپت متد toString() آن را صدا می‌زند و خروجی نامطلوب "[object Object]" در حافظه ثبت می‌شود.

// تعریف یک شیء نمونه

const userProfile = {

  id: 1024,

  name: ‘رضا’,

  roles: [‘admin’, ‘editor’]

};
// ۱. تبدیل به رشته و ذخیره

localStorage.setItem(‘user’, JSON.stringify(userProfile));
// ۲. دریافت و تبدیل مجدد به شیء جاوا اسکریپت

const savedData = localStorage.getItem(‘user’);

if (savedData) {

  const parsedUser = JSON.parse(savedData);

  console.log(parsedUser.name); // خروجی: رضا

}

هنگام ساخت رابط‌های کاربری پویا، مانند زمان پردازش فرم‌های پیچیده یا قرار دادن عناصر تعاملی در کدهای HTML، همیشه متد JSON.parse() را درون یک بلوک try...catch قرار دهید تا در صورت خراب بودن ساختار JSON، برنامه با خطا مواجه نشود.

همگام‌سازی تب‌ها با رویداد storage

یکی از قابلیت‌های بی‌نظیر مرورگرها، رویداد storage است. اگر کاربر سایت شما را در دو تب مختلف باز کرده باشد و در تب اول تغییری در LocalStorage ایجاد شود (مثلاً خروج از حساب یا تغییر تم)، تب دوم می‌تواند بلافاصله از این تغییر باخبر شود.

window.addEventListener(‘storage’, (event) => {

  console.log(`کلید تغییر یافته: ${event.key}`);

  console.log(`مقدار قدیم: ${event.oldValue}`);

  console.log(`مقدار جدید: ${event.newValue}`);

  console.log(`آدرس صفحه: ${event.url}`);

});

نکته فنی مهم: رویداد storage در تبی که خودش تغییر را ایجاد کرده اجرا نمی‌شود، بلکه فقط در سایر تب‌ها یا پنجره‌های باز همان دامنه فعال خواهد شد.

محدودیت‌های فنی و نکات حیاتی امنیت

با وجود سادگی استفاده، رعایت نکات زیر در پروژه‌های واقعی الزامی است:

آسیب‌پذیری در برابر حملات XSS: هر اسکریپت مخربی که بتواند روی سایت شما اجرا شود، به تمام اطلاعات LocalStorage دسترسی دارد. هرگز اطلاعات حساس مانند توکن‌های JWT، رمز عبور یا اطلاعات کارت بانکی را اینجا ذخیره نکنید. برای توکن‌های حساس از HTTP-Only Cookies استفاده کنید.
مسدودکننده بودن (Synchronous Blocking): تمام عملیات‌های خواندن و نوشتن روی رشته‌ها کاملاً Synchronous هستند. اگر حجم زیادی از اطلاعات را یکباره ذخیره یا پردازش کنید، UI سایت قفل می‌شود.
محدودیت ظرفیت (QuotaExceededError): مرورگرها حداکثر ۵ مگابایت فضا اختصاص می‌دهند. همیشه باید کد ذخیره‌سازی را مدیریت کنید:

try {

  localStorage.setItem(‘large_data’, data);

} catch (e) {

  if (e.name === ‘QuotaExceededError’) {

    console.error(‘حافظه LocalStorage پر شده است!’);

  }

}

در برنامه‌نویسی مدرن وب، هنگام پیکربندی بخش‌های مختلف سایت یا استفاده از ابزارهایی مانند آموزش المنتور فارسی برای طراحی فرانت‌اند، مدیریت درست داده‌های مرورگر به ثبات تجربه کاربری کمک شایانی می‌کند. اگر مایل به مطالعه بخش‌های دیگر جاوا اسکریپت هستید، می‌توانید به دسته‌بندی تکه کدهای کاربردی مراجعه کنید.

پرسش‌های متداول

آیا داده‌های LocalStorage پس از ری‌استارت مرورگر باقی می‌مانند؟

بله، داده‌ها تا زمانی که کاربر حافظه مرورگر را پاک نکند یا سایت با دستور clear() آن‌ها را حذف نکند، باقی خواهند ماند.

حداکثر حجم قابل ذخیره در LocalStorage چقدر است؟

در اکثر مرورگرهای مدرن این مقدار ۵ مگابایت به ازای هر دامنه (Origin) است.

آیا سرور به داده‌های LocalStorage دسترسی دارد؟

خیر، برخلاف کوکی‌ها، داده‌های LocalStorage همراه با درخواست‌های HTTP به سرور ارسال نمی‌شوند و فقط سمت کلاینت در دسترس هستند.

تفاوت اصلی LocalStorage و SessionStorage چیست؟

داده‌های SessionStorage با بستن تب یا پنجره مرورگر پاک می‌شوند، اما داده‌های LocalStorage ماندگار هستند.

راهنمای عیب‌یابی سریع

۱. خطای AccessDenied یا SecurityError در مرورگر

علت: کاربر کوکی‌ها یا ذخیره‌سازی محلی را در تنظیمات مرورگر غیرفعال کرده یا فایل HTML را مستقیماً بدون وب‌سرور (پروتوکل file://) باز کرده‌اید.
راه‌حل: پروژه را روی یک سرور محلی (مثل Live Server) اجرا کنید و از فعال بودن Storage در تنظیمات مرورگر مطمئن شوید.

۲. خروجی Uncaught SyntaxError هنگام JSON.parse

علت: مقداری که از LocalStorage دریافت شده برابر با null یا یک رشته غیر-JSON است.
راه‌حل: قبل از Parse کردن، بررسی کنید مقدار دریافت شده وجود داشته باشد و عملیات را داخل try…catch قرار دهید.

۳. عدم ذخیره شدن تغییرات جدید و نمایش داده‌های قدیمی

علت: عدم استفاده از کلیدهای یکتا یا overwrite شدن تصادفی داده‌ها توسط کدهای دیگر.
راه‌حل: در تب Application مرورگر (قسمت Local Storage)، کلیدها را به‌صورت زنده بررسی کنید تا از متد درست اطمینان حاصل کنید.

سوالات متداول

آیا داده‌های LocalStorage پس از بستن مرورگر پاک می‌شوند؟

خیر، داده‌های ذخیره‌شده در LocalStorage دائمی هستند و تاریخ انقضا ندارند. این داده‌ها تنها با پاک کردن دستی حافظه مرورگر یا استفاده از متدهای کدنویسی حذف می‌شوند.

حجم ذخیره‌سازی LocalStorage در مرورگر چقدر است؟

حجم مجاز برای ذخیره‌سازی داده در LocalStorage معمولاً حدود ۵ مگابایت برای هر دامنه (Origin) است. برای حجم‌های بالاتر، استفاده از IndexedDB توصیه می‌شود.

چگونه یک Object یا آرایه را در LocalStorage ذخیره کنیم؟

از آنجا که LocalStorage فقط رشته متنی ذخیره می‌کند، باید ابتدا شیء را با JSON.stringify به رشته تبدیل کنید و هنگام خواندن نیز از JSON.parse برای تبدیل مجدد آن استفاده نمایید.

تفاوت اصلی LocalStorage و SessionStorage چیست؟

داده‌های LocalStorage دائمی بوده و با بستن مرورگر باقی می‌مانند، اما داده‌های SessionStorage بلافاصله پس از بستن تب یا پنجره مربوطه در مرورگر پاک می‌شوند.