| قدم قبلی > | < قدم بعدی |
ذخیره سازی وب HTML5
در این آموزش html به ذخیره سازی وب HTML می پردازیم.
ذخیره سازی وب سایت HTML؛ بهتر از کوکی ها.
ذخیره سازی وب HTML چیست؟
با ذخیره سازی وب، برنامه های کاربردی وب می توانند داده ها را به صورت محلی در مرورگر کاربر ذخیره کنند.
قبل از HTML5، داده های برنامه باید در کوکی ها ذخیره شوند، که در هر درخواست سرور شامل می شود. ذخیره سازی وب امن تر است، و مقدار زیادی از داده ها را می توان به صورت محلی ذخیره کرد، بدون تاثیر بر عملکرد وب سایت.
بر خلاف کوکی ها، حد ذخیره سازی بسیار بزرگتر است (حداقل ۵ مگابایت) و اطلاعات هرگز به سرور منتقل نمی شود.
ذخیره سازی وب به هر مبدأ (در هر دامنه و پروتکل) است. تمام صفحات، از یک مبدأ، می توانند داده های مشابه را ذخیره و دسترسی داشته باشند.
اشیاء ذخیره سازی وب HTML
ذخیره سازی وب HTML فراهم می کند دو اشیاء برای ذخیره داده ها در مشتری:
- window.localStorage – ذخیره داده ها بدون تاریخ انقضا
- window.sessionStorage – ذخیره داده ها برای یک جلسه (داده ها از بین می روند وقتی برگه مرورگر بسته شده است)
قبل از استفاده از ذخیره سازی وب، پشتیبانی مرورگر برای localStorage و sessionStorage را بررسی کنید:
۱ ۲ ۳ ۴ ۵ | if (typeof(Storage) !== "undefined") { // Code for localStorage/sessionStorage. } else { // Sorry! No Web Storage support.. } |
شیء LocalStorage
شیء localStorage داده ها را بدون تاریخ انقضا ذخیره می کند. وقتی مرورگر بسته می شود داده ها حذف نخواهد شد و روز، هفته یا سال بعد در دسترس خواهند بود.
۱ ۲ ۳ ۴ | // Store localStorage.setItem("lastname", "Smith"); // Retrieve document.getElementById("result").innerHTML = localStorage.getItem("lastname"); |
توضیح مثال:
- ایجاد یک جفت نام / ارزش localStorage با نام = “نام خانوادگی” و مقدار = “اسمیت”
- مقدار “نام خانوادگی” را بازیابی کنید و آن را در عنصر با id = “result” قرار دهید
مثال فوق نیز می تواند چنین باشد:
۱ ۲ ۳ ۴ | // Store localStorage.lastname = "Smith"; // Retrieve document.getElementById("result").innerHTML = localStorage.lastname; |
نحو حذف موارد نام خانوادگی localStorage به شرح زیر است:
۱ | localStorage.removeItem("lastname"); |
توجه: جفت نام / ارزش همیشه به عنوان رشته ذخیره می شود. به یاد داشته باشید که در صورت نیاز، آنها را به قالب دیگری تبدیل کنید!
مثال زیر تعداد دفعاتی که یک کاربر یک دکمه را کلیک کرده است را شمارش می کند. در این کد رشته ارزش به یک عدد تبدیل می شود تا بتواند شمارنده را افزایش دهد:
۱ ۲ ۳ ۴ ۵ ۶ ۷ | if (localStorage.clickcount) { localStorage.clickcount = Number(localStorage.clickcount) + ۱; } else { localStorage.clickcount = ۱; } document.getElementById("result").innerHTML = "You have clicked the button " + localStorage.clickcount + " time(s)."; |
شیء sessionStorage
شی جلسه ذخیره سازی برابر با شیء LocalStorage است، به جز اینکه داده ها را تنها برای یک جلسه ذخیره می کند. هنگامی که کاربر بسته زبانه مرورگر خاص را بسته می کند داده ها حذف می شوند.
مثال زیر تعداد دفعاتی که کاربر یک دکمه را در جلسه فعلی کلیک کرده است:
۱ ۲ ۳ ۴ ۵ ۶ ۷ | if (sessionStorage.clickcount) { sessionStorage.clickcount = Number(sessionStorage.clickcount) + ۱; } else { sessionStorage.clickcount = ۱; } document.getElementById("result").innerHTML = "You have clicked the button " + sessionStorage.clickcount + " time(s) in this session."; |
| گام قبلی > | < گام بعدی |
هنوز دیدگاهی برای این مطلب ثبت نشده است.