آخرین بازبینی: ۱۴۰۴/۰۸/۱۲

LocalStorage در جاوااسکریپت چیست و چه کاربردی دارد ؟

LocalStorage بخشی از استاندارد Web Storage API است که برای نگهداری داده‌های سمت کاربر طراحی شده. داده‌ها به‌صورت کلید‑مقدار (key‑value) در مرورگر نگهداری می‌شوند. این داده‌ها فقط متنی هستند (string) و محدود به دامنه‌ی وب‌سایت ارائه‌کننده‌ هستند.

برخلاف کوکی‌ها، داده‌های LocalStorage با درخواست‌های HTTP ارسال و دریافت نمی‌شوند و فقط توسط جاوااسکریپت می‌توانند ذخیره و بازیابی شوند که این موضوع باعث بهبود کارایی نسبت به کوکی‌ها می‌شود.

تفاوت LocalStorage با کوکی چیست ؟

ویژگی	LocalStorage	کوکی‌ها
محل نگهداری	مرورگر کاربر	مرورگر + ارسال هر درخواست به سرور
حداکثر حجم داده	حدود ۵ تا ۱۰ مگابایت (بسته به مرورگر)	حدود ۴ کیلوبایت
سال انتشار و استاندارد	HTML5	قدیمی، مبتنی بر HTTP
دسترسی برنامه‌نویسی	فقط از طریق JavaScript	از طریق HTTP یا JavaScript
ماندگاری داده‌ها	تا زمان پاک شدن توسط کد یا کاربر	می‌تواند دارای تاریخ انقضا باشد
سرعت دسترسی	بالا، در حافظه محلی	پایین‌تر، چون در هر درخواست ارسال می‌شود
حوزه امنیتی	محدود به دامنه و پروتکل	قابل تنظیم با مسیر و دامنه

ماندگاری داده‌ها در LocalStorage

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

در نتیجه، اطلاعات می‌توانند «دائمی» باشند، ولی دائمی بودن کامل وابسته به سیاست‌های مرورگر و رفتار کاربر (مثل پاک کردن Cache یا استفاده از حالت Private/Incognito) است.

ذخیره و بازیابی داده‌ها در LocalStorage

انجام این‌کار با استفاده از جاوااسکریپت به آسانی قابل انجام است. به مثال‌های زیر توجه کنید:

localStorage.setItem("theme", "dark");

// بازیابی و اعمال حالت در بارگذاری صفحه
const theme = localStorage.getItem("theme");
if (theme === "dark") {
  document.body.classList.add("dark-mode");
}

localStorage.setItem("theme", "dark");

// بازیابی و اعمال حالت در بارگذاری صفحه

const theme = localStorage.getItem("theme");

if (theme === "dark") {

document.body.classList.add("dark-mode");

}

ذخیره‌سازی نام کاربر و نمایش آن در صفحات دیگر:

// ذخیره نام وارد‌شده در فیلد
document.querySelector("#name").addEventListener("input", (e) => {
  localStorage.setItem("username", e.target.value);
});

// بازیابی نام در بارگذاری صفحه
const savedName = localStorage.getItem("username");
if (savedName) {
  document.querySelector("#name").value = savedName;
}

// ذخیره نام وارد‌شده در فیلد

document.querySelector("#name").addEventListener("input", (e) => {

localStorage.setItem("username", e.target.value);

});

// بازیابی نام در بارگذاری صفحه

const savedName = localStorage.getItem("username");

if (savedName) {

document.querySelector("#name").value = savedName;

}

امنیت در LocalStorage

کاربرد LocalStorage برای بهبود عملکرد سیستم طراحی شده است و زیرساخت‌های امنیتی برای داده‌های حساس را ندارد.

داده‌ها بدون رمزگذاری روی دیسک ذخیره می‌شوند.
هر شخص یا افزونه‌ای که دسترسی به مرورگر کاربر دارد (مثلا در حالت هک یا بدافزار) می‌تواند آن‌ها را بخواند.
فقط اسکریپت‌هایی از همان دامنه قادر به خواندن یا تغییرآن‌ها هستند. اما خطر اصلی XSS (Cross‑Site Scripting) است.

با توجه به نکات بالا،‌ برنامه‌نویس باید دقت کافی داشته باشد تا اطلاعات حساس و خصوصی را در این سیستم ذخیره نکند.

مشاهده و تغییر داده‌ها

فقط صفحه یا اسکریپت‌هایی در همان origin (ترکیب دامنه + پروتکل + پورت) قادر به مشاهده و تغییر هستند.
کاربران می‌توانند داده‌ها را از طریق کنسول مرورگر مشاهده و ویرایش کنند.
سایت‌های دیگر یا تب‌های خارج از دامنه، امکان مشاهده یا تغییر ندارند.

محدودیت حجم

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

Chrome / Edge / Firefox
۵ تا ۱۰ مگابایت
Safari (iOS/macOS)
حدود ۵ مگابایت
Opera / Brave
حدود ۵ مگابایت

داده‌ها باید رشته‌ای باشند. برای ساختارهای بزرگ می‌توان از داده‌های جیسون(JSON) استفاده کنید.
ذخیرهٔ داده‌های چند ده کیلوبایتی (مثل تنظیمات، کش تصاویر کوچک یا وضعیت سشن) عملی و سریع است، اما برای داده‌های حجیم بهتر است از روش‌های دیگر و مطمئن‌تر استفاده کنید.

چه داده‌هایی را می‌توان در LocalStorage ذخیره کرد ؟

به طور کلی اطلاعاتی که دسترسی به آن در تمام درخواست‌ها ضروری است و اطلاعات حساس به حساب نمی‌آیند و حجم آن کمتر از ۵ مگابایت باشد می‌تواند در LocalStorage نگهداری شود. مواردی مثل:

پیکربندی یا ترجیحات کاربر (نمای تیره، زبان، موقعیت منو)
اطلاعات وضعیت موقت (progress فرم، آخرین صفحه مشاهده‌شده)
کش داده‌های API سبک
اطلاعات متنی یا JSON با حجم کمتر از چند صد کیلوبایت

برای داده‌های ساختاریافته سنگین‌تر (عکس، ویدئو، فایل) باید از IndexedDB یا Cache Storage استفاده شود.

اشتراک داده‌ها بین تب‌ها

LocalStorage به‌صورت اشتراکی بین تمام تب‌های یک دامنه عمل می‌کند. اگر در یک تب داده تغییر کند، تب دیگر به آن اطلاعات دسترسی دارند. اما مرورگر تا زمان وقوع رویداد storage، این تغییر را به تب‌های دیگر اطلاع نمی‌دهد.

مرورگر رویدادی به نام storage دارد. با تعریف یک رویداد روی آن به شکل زیر می‌توانید از تغییر داده‌ها در تب‌های دیگر باخبر شوید و واکنش مناسب را به کاربر نشان دهید.

window.addEventListener("storage", function(event) {
    console.log("key:", event.key, "new value:", event.newValue);
});

window.addEventListener("storage", function(event) {

console.log("key:", event.key, "new value:", event.newValue);

});

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

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

علاوه بر LocalStorage روش‌های دیگری برای نگهداری اطلاعات وجود دارد که هر کدام کاربردها و ویژگی‌های منحصر به فردی دارند. با دانستن این تفاوت‌ها و ویژگی‌ها می‌توانید برای کاربردهای مختلف روش‌های مناسب‌تری را انتخاب کنید.

روش	ویژگی
SessionStorage	مشابه LocalStorage، ولی فقط تا پایان تب فعال است.
IndexedDB	پایگاه داده محلی مبتنی بر شیء. مناسب اطلاعات حجیم یا ساخت‌یافته
Cache Storage (Service Worker)	برای نگهداری پاسخ‌های شبکه و فایل‌های ثابت، جهت اجرای آفلاین.
کوکی‌ها	برای داده‌های کوچک و تعامل با سرور

سرعت و کارایی

LocalStorage بسیار سریع‌تر از کوکی‌ها است زیرا:

در حافظه‌ی مرورگر نگهداری می‌شود.
نیازی به ارسال در هر درخواست HTTP ندارد.
عملیات خواندن و نوشتن آن تقریبا فوری است (در حد چند میلی‌ثانیه برای کیلوبایت‌ها).

اما در داده‌های سنگین‌تر از چند مگابایت، سرعت افت می‌کند و ممکن است در عملیات I/O یا تبدیل JSON تاخیر واضح دیده شود. برای چنین کاربردهایی، IndexedDB انتخاب بهینه‌تری است (به‌ویژه در اپلیکیشن‌های PWA یا داشبوردهای بزرگ).

جمع‌بندی ویژگی‌های LocalStorage

ویژگی	ارزیابی
ماندگاری	بلندمدت، تا پاک‌سازی دستی
امنیت	مناسب فقط برای اطلاعات عمومی
حجم	بزرگ‌تر از کوکی‌ها ولی محدود به ۵ تا ۱۰ مگابایت
سرعت	عالی برای مقادیر کم یا متنی
دسترسی تب‌ها	مشترک بین تمام تب‌های همان دامنه
قابلیت رهگیری تغییرات	دارد (رویداد `storage`)
توصیه فنی	برای تنظیمات، ترجیحات و کش سبک انتخابی مناسب است

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

LocalStorage
مناسب Front-End سبک و داده‌های فوری
IndexedDB
مناسب رابط‌های پایگاه‌داده م حلی بزرگ
Cache Storage
مناسب ذخیرهٔ فایل‌های ایستا برای اجرا آفلاین