ذخیره‌سازی وب در 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.";

مشاهدهٔ نتیجه

صفحهٔ بعد»

«صفحهٔ قبل