ذخیرهسازی وب در HTML
Main Page Tutorial | |
---|---|
![]() | |
موارد آموزشی | |
فرمهای HTML | |
گرافیک در HTML | |
رسانه در HTML | |
APIها در HTML | |
۱ | موقعیت جغرافیایی |
۲ | کشیدن/رهاکردن |
۳ | ذخیرهسازی وب |
۴ | Workerهای وب |
۵ | SSE |
مثالها | |
مرجع HTML |
ذخیره سازی وب؛ بهتر از cookie هاست.[۱]
محتویات
ذخیره سازی وب HTML چیست؟
با ذخیره سازی وب، برنامههای کاربردی وب میتوانند دادهها را بطور محلی در مرورگر کاربر ذخیره کنند.
پیش از HTML5، دادههای برنامه کاربردی باید در cookieها ذخیره میشد، در همهٔ درخواستهای کاربر گنجانده میشد. ذخیره سازی وب امن تر است و حجم زیادی از دادهها را میتوان بدون تأثیر برروی عملکرد وبسایت، بطور محلی ذخیره کرد.
برخلاف cookieها، محدودیت ذخیره سازی بسیار بزرگتر است (حداقل 5MB) و اطلاعات هرگز به سرور منتقل نمیشود.
ذخیره سازی وب به ازاء مبدأ است (به ازاء دامنه و پروتکل). همه صفحات، از یک مبدأ را میتوان ذخیره کرد و به همان دادهها دسترسی داشت.
پشتیبانی مرورگر
اعداد در جدول زیر نشان دهندهٔ اولین نسخه مرورگر هستند که از ذخیره سازی وب پشتیبانی کامل میکنند.
API | ![]() |
![]() |
![]() |
![]() |
![]() |
ذخیرهسازی وب | ۴٫۰ | ۸٫۰ | ۳٫۵ | ۴٫۰ | ۱۱٫۵ |
اشیاء ذخیره سازی وب در HTML
ذخیره سازی وب HTML دو شیء را برای ذخیره کردن دادهها در کلاینت (به انگلیسی: Client) فراهم میکند:
window.localStorage
- دادههای بدون انقضا را ذخیره میکندwindow.sessionStorage
- دادهها را برای یک session (به فارسی: جلسه) ذخیره میکند (دادهها با بسته شدن مرورگر از بین میروند)
پیش از استفاده از ذخیره سازی وب، پشتیبانی مرورگر از localStorage و sessionStorage را بررسی کنید:
1 if (typeof(Storage) !== "undefined") {
2 // Code for localStorage/sessionStorage.
3 } else {
4 // Sorry! No Web Storage support..
5 }
شیء localStorage
شیء localStorage دادههای بدون تاریخ انقضا را ذخیره میکند. این دادهها با بسته شدن مرورگر حذف نمیشوند، و تا هفته یا سال بعد هم موجود هستند.
مثال
1 // Store
2 localStorage.setItem("lastname", "Smith");
3
4 // Retrieve
5 document.getElementById("result").innerHTML = localStorage.getItem("lastname");
توضیح مثال:
- یک جفت نام / مقدار localStorage با name="lastname" و value="Smith" ایجاد کنید
- مقدار "lastname" را بازیابی کرده و در عنصر با id="result" وارد کنید
مثال بالا را میتوان اینگونه نیز نوشت:
1 // Store
2 localStorage.lastname = "Smith";
3 // Retrieve
4 document.getElementById("result").innerHTML = localStorage.lastname;
نحو حذف آیتم "lastname" localStorage به شکل زیر است:
localStorage.removeItem("lastname");
توجه: جفتهای نام/مقدار همیشه بعنوان رشته ذخیره میشوند. به یاد داشته باشید که هنگام نیاز آنها را فرمت دیگری تبدیل کنید!
مثال زیر تعداد دفعات کلیک کردن کاربر برروی یک کلید را شمارش میکند. در این کد مقدار رشته به عدد تبدیل شده تا بتوان شمارنده را افزایش داد:
مثال
1 if (localStorage.clickcount) {
2 localStorage.clickcount = Number(localStorage.clickcount) + 1;
3 } else {
4 localStorage.clickcount = ۱;
5 }
6 document.getElementById("result").innerHTML = "You have clicked the button " +
7 localStorage.clickcount + " time(s).";
شیء sessionStorage
شیء sessionStorage
برابر با شیء localStorage است، به جز اینکه فقط دادههای یک session را ذخیره میکند. دادهها هنگامی که کاربر تب خاصی در مرورگر را ببندد حذف میشوند.
مثال زیر تعداد دفعاتی که کاربر در session فعلی برروی یک کلید کلیک کرده را شمارش میکند:
مثال
1 if (sessionStorage.clickcount) {
2 sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
3 } else {
4 sessionStorage.clickcount = 1;
5 }
6 document.getElementById("result").innerHTML = "You have clicked the button " +
7 sessionStorage.clickcount + " time(s) in this session.";
منابع آموزشی