ذخیرهسازی در مرورگر با 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:
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 برای ذخیرهسازی اطلاعاتی مانند نشستها و ترجیحات کاربر مناسب است.
