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

ذخیره‌سازی در مرورگر یکی از ویژگی‌های مهم HTML5 است که به توسعه‌دهندگان این امکان را می‌دهد تا داده‌ها را به‌صورت محلی در مرورگر کاربر ذخیره کنند، حتی پس از بسته شدن مرورگر. این ویژگی‌ها به بهبود تجربه کاربری، ذخیره‌سازی داده‌ها در حالت آفلاین، و بهینه‌سازی عملکرد سایت کمک می‌کنند. HTML5 چهار تکنولوژی اصلی برای ذخیره‌سازی در مرورگر ارائه می‌دهد:

1. LocalStorage

LocalStorage یکی از ویژگی‌های ذخیره‌سازی محلی است که داده‌ها را برای مدت نامحدودی در مرورگر ذخیره می‌کند، حتی پس از بستن مرورگر یا راه‌اندازی مجدد آن. داده‌ها در LocalStorage به‌صورت کلید/مقدار ذخیره می‌شوند.

مزایا: ذخیره‌سازی داده‌ها به صورت دائمی و امکان دسترسی به داده‌ها از هر صفحه‌ای که در همان دامنه بارگذاری می‌شود.
محدودیت‌ها: داده‌ها فقط در همان دامنه قابل دسترسی هستند و حجم آن محدود است (در بیشتر مرورگرها، معمولاً حدود 5 تا 10MB).

نحوه استفاده از LocalStorage:

// ذخیره‌سازی داده

localStorage.setItem('username', 'JohnDoe');

// دریافت داده

let username = localStorage.getItem('username');

console.log(username);  // خروجی: JohnDoe

// حذف داده

localStorage.removeItem('username');

// پاک کردن تمام داده‌ها

localStorage.clear();

2. SessionStorage

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

مزایا: برای ذخیره داده‌هایی که فقط در طول یک جلسه کاربر نیاز هستند (مثلاً انتخاب‌های یک کاربر در فرم).
محدودیت‌ها: داده‌ها فقط در همان تب مرورگر موجود است و پس از بستن تب از بین می‌رود.

نحوه استفاده از SessionStorage:

// ذخیره‌سازی داده

sessionStorage.setItem('sessionData', 'value123');

// دریافت داده

let sessionData = sessionStorage.getItem('sessionData');

console.log(sessionData);  // خروجی: value123

// حذف داده

sessionStorage.removeItem('sessionData');

// پاک کردن تمام داده‌ها

sessionStorage.clear();

3. IndexedDB

IndexedDB یک پایگاه داده محلی است که می‌تواند مقادیر زیادی داده را به صورت ساختاری ذخیره کند. این تکنولوژی به شما اجازه می‌دهد که داده‌ها را به صورت شیء ذخیره کنید و جستجو، ایندکس‌گذاری و حتی ذخیره‌سازی فایل‌ها را انجام دهید.

مزایا: ذخیره‌سازی مقادیر بزرگتر و پیچیده‌تر داده‌ها، از جمله فایل‌ها. قابلیت جستجوی پیشرفته و ایندکس‌گذاری.
محدودیت‌ها: کار با IndexedDB پیچیده‌تر است و نیاز به استفاده از APIهای خاص برای تعامل با داده‌ها دارد.

نحوه استفاده از IndexedDB:

let request = indexedDB.open('myDatabase', 1);

request.onupgradeneeded = function(event) {

  let db = event.target.result;

  let store = db.createObjectStore('users', { keyPath: 'id' });

};

request.onsuccess = function(event) {

  let db = event.target.result;

  let transaction = db.transaction(['users'], 'readwrite');

  let store = transaction.objectStore('users');

  store.put({ id: 1, name: 'John Doe' });

};

request.onerror = function(event) {

  console.log('Error opening IndexedDB:', event.target.error);

};

4. Cookies

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

مزایا: به راحتی برای ذخیره اطلاعات کوچک استفاده می‌شود.
محدودیت‌ها: حجم محدود (حدود 4KB)، ارسال خودکار با هر درخواست HTTP، به همین دلیل می‌تواند روی عملکرد تاثیر بگذارد.

نحوه استفاده از Cookies:

// ذخیره‌سازی کوکی

document.cookie = "username=JohnDoe; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";

// دریافت کوکی‌ها

let cookies = document.cookie;

console.log(cookies);  // خروجی: username=JohnDoe

// حذف کوکی‌ها (با تنظیم تاریخ انقضا به گذشته)

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";

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

ویژگی	LocalStorage	SessionStorage	IndexedDB	Cookies
مدت زمان ذخیره‌سازی	دائمی تا زمانی که پاک شود	تا زمان بسته شدن تب یا مرورگر	دائمی تا زمانی که پاک شود	کوتاه (معمولاً برای چند ساعت یا روز)
ظرفیت ذخیره‌سازی	5MB - 10MB	5MB - 10MB	حجم بیشتر (می‌تواند حجم‌های بزرگتر ذخیره کند)	حدود 4KB
داده‌ها در دسترس	فقط در دامنه‌های مشابه	فقط در تب مرورگر مشابه	قابل دسترسی از طریق JavaScript	در همه درخواست‌ها به سرور ارسال می‌شود
استفاده برای	داده‌های دائمی و کوچک	داده‌های موقت و کوچک	داده‌های پیچیده و ساختاری	اطلاعات کوچک مانند نشست‌ها یا تنظیمات
نحوه دسترسی به داده‌ها	ساده و مستقیم	ساده و مستقیم	پیچیده‌تر (با استفاده از API)	ساده و با استفاده از document.cookie

نتیجه‌گیری:

استفاده از تکنولوژی‌های ذخیره‌سازی در مرورگر به شما این امکان را می‌دهد که داده‌ها را به‌صورت محلی و با قابلیت‌های مختلف در مرورگر ذخیره کنید. انتخاب روش ذخیره‌سازی بستگی به نیاز شما دارد؛ برای ذخیره‌سازی داده‌های موقت می‌توانید از SessionStorage استفاده کنید، برای داده‌های دائمی از LocalStorage استفاده کنید، و برای داده‌های پیچیده‌تر و مقادیر بزرگتر از IndexedDB بهره بگیرید. همچنین، Cookies برای ذخیره‌سازی اطلاعاتی مانند نشست‌ها و ترجیحات کاربر مناسب است.