ذخیره سازی وب HTML5

ذخیره سازی وب HTML5  چیست ؟

آموزش APIs درس سوم

ذخیره سازی وب HTML5  ، بهتر از کوکی ها.

ذخیره سازی وب HTML چیست؟

با ذخیره سازی وب، برنامه های کاربردی وب می توانند داده ها را به صورت محلی در مرورگر کاربر ذخیره کنند.
قبل از HTML5، داده های برنامه باید در کوکی ها ذخیره شوند، که در هر درخواست سرور شامل می شود. ذخیره سازی وب امن تر است، و مقدار زیادی از داده ها را می توان به صورت محلی ذخیره کرد، بدون تاثیر بر عملکرد وب سایت.
بر خلاف کوکی ها، حد ذخیره سازی بسیار بزرگتر است (حداقل ۵ مگابایت) و اطلاعات هرگز به سرور منتقل نمی شود.
ذخیره سازی وب به هر مبدأ (در هر دامنه و پروتکل) است. تمام صفحات، از یک مبدأ، می توانند داده های مشابه را ذخیره و به آنها دسترسی داشته باشند.

ذخیره سازی وب HTML5
ذخیره سازی وب HTML5

پشتیبانی مرورگر

اعداد در جدول اولین نسخه مرورگر را مشخص می کند که به طور کامل از ذخیره سازی وب پشتیبانی می کند.

API کروم اینترنت اکسپلورر فایرفاکس سافاری آپرا
Web Storage۴.۰۸.۰۳.۵۴.۰۱۱.۵

پشتیبانی مرورگر 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 داده ها را بدون تاریخ انقضا ذخیره می کند. وقتی مرورگر بسته می شود داده ها حذف نخواهد شد و روز، هفته یا سال بعد در دسترس خواهند بود.

حتما بخوانید:  html head

مثال :

// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

توضیح مثال:

• ایجاد یک  جفت localStorage name/value    با name=”lastname” and value=”Smith”

  • value متعلق به “lastname” را بازیابی کنید و آن را در عنصر با id = “result” قرار دهید
    مثال فوق نیز می تواند چنین باشد:
// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;

متن حذف “lastname” localStorage به شرح زیر است:

 localStorage.removeItem("lastname");

توجه: جفت Name/value همیشه به عنوان  مقدار رشته ای  ذخیره می شود. به یاد داشته باشید که در صورت نیاز، آنها را به فرمت  دیگری تبدیل کنید!
مثال زیر تعداد دفعاتی که یک کاربر یک دکمه را کلیک کرده است را شمارش می کند. در این کد value که رشته ای می باشد   به یک عدد تبدیل می شود تا بتواند شمارنده را افزایش دهد:

if (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
    localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
localStorage.clickcount + " time(s)."; 

شی  sessionStorage

شی sessionStorage برابر با شیء LocalStorage است، به جز اینکه داده ها را تنها برای یک session (جلسه )ذخیره می کند. هنگامی که کاربر تب خاص مرورگر  را ببندد  داده ها حذف می شوند.
مثال زیر تعداد دفعاتی که کاربر یک دکمه را در جلسه فعلی کلیک کرده است  را می شمارد:

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";
امتیاز کاربران به این مطلب
۰ نفر - میانگین: ۰
تلگرام

دیدگاه‌تان را ثبت کنید:

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

6 − 4 =

PHN0eWxlPi5oX2lmcmFtZS1hcGFyYXRfZW1iZWRfZnJhbWV7cG9zaXRpb246cmVsYXRpdmU7fSAuaF9pZnJhbWUtYXBhcmF0X2VtYmVkX2ZyYW1lIC5yYXRpbyB7ZGlzcGxheTpibG9jazt3aWR0aDoxMDAlO2hlaWdodDphdXRvO30gLmhfaWZyYW1lLWFwYXJhdF9lbWJlZF9mcmFtZSBpZnJhbWUge3Bvc2l0aW9uOmFic29sdXRlO3RvcDowO2xlZnQ6MDt3aWR0aDoxMDAlOyBoZWlnaHQ6MTAwJTt9PC9zdHlsZT48ZGl2IGNsYXNzPSJoX2lmcmFtZS1hcGFyYXRfZW1iZWRfZnJhbWUiPiA8c3BhbiBzdHlsZT0iZGlzcGxheTogYmxvY2s7cGFkZGluZy10b3A6IDU3JSI+PC9zcGFuPjxpZnJhbWUgc3JjPSJodHRwczovL3d3dy5hcGFyYXQuY29tL3ZpZGVvL3ZpZGVvL2VtYmVkL3ZpZGVvaGFzaC85dHk0VS92dC9mcmFtZSIgYWxsb3dGdWxsU2NyZWVuPSJ0cnVlIiB3ZWJraXRhbGxvd2Z1bGxzY3JlZW49InRydWUiIG1vemFsbG93ZnVsbHNjcmVlbj0idHJ1ZSIgPjwvaWZyYW1lPjwvZGl2Pg==
با سپاس از ثبت دیدگاه شما دوست عزیز
از تماشای این ویدیو لذت ببرید ...
فقط چند ثانیه تا دانلود فاصله دارید!
* دانلود فایل سخنرانی استیو جابز ...
ایبوک هدف‌گذاری موثر
زودتر از آنچه فکرش را می‌کنید به خواسته‌هایتان دست پیدا کنید!
* لینک دانلود بلافاصله ایمیل می‌شود.
چهار عامل شگفت انگیز کسب درآمد چیست؟
فقط چند ثانیه تا دانلود فاصله دارید!
* سه ایده کسب و کار خانگی پولساز
فقط چند ثانیه تا دانلود فاصله دارید!
* ایبوک: ده مکان عالی برای پیدا کردن یک ایده جدید
فقط چند ثانیه تا دانلود فاصله دارید!
* دانلود ویدیوی جذاب و با کیفیت مصاحبه جک ما
از همین امروز شروع کنید
بدون تجربه و دانش فنی وارد دنیای درآمدهای اینترنتی شوید!
فایل‌های آموزشی برای شما ایمیل می‌شود.
فقط چند ثانیه تا دریافت این فایل آموزشی فاصله دارید!
فایل‌های آموزشی ویژه اعضای سایت
* اگر عضو نیستید با وارد کردن ایمیل‌تان به این فایل دسترسی پیدا می‌کنید
دسترسی مخصوص اعضای سایت
عضو سایت نیستید؟
فقط کافیه نام و ایمیل‌تان را وارد کنید و ...
* دسترسی سریع به تمام فایل‌های آموزشی
هدیه ما به شما
با سپاس از اینکه دیدگاه تان را در سایت ما ثبت کردید.


یک کوپن تخفیف 30%
  • مشاوره حضوری
  • دوره های آنلاین
  • بسته های آموزشی
  • محصولات دانلودی
  • وبینارهای آموزشی
  این کد فقط یکبار به شما نمایش داده می‌شود.
کد: qwert
ورود کاربران
* دسترسی رایگان به بخش آکادمی