٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش ذخیره سازی وب HTML

ذخیره سازی وب HTML؛ بهتر از کوکی. HTML Web Storage چیست؟ با ذخیره سازی وب ، برنامه های وب می توانند داده ها را به صورت محلی در مرورگر کاربر ذخیره کنند. قبل از HTML5 ، داده های برنامه باید در…

محمد یوسفی

3 جولای 2021

ذخیره سازی وب HTML؛ بهتر از کوکی.


HTML Web Storage چیست؟

با ذخیره سازی وب ، برنامه های وب می توانند داده ها را به صورت محلی در مرورگر کاربر ذخیره کنند.

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

برخلاف کوکی ها ، محدودیت ذخیره سازی بسیار بیشتر است (حداقل 5 مگابایت) و اطلاعات هرگز به سرور منتقل نمی شوند.

فضای ذخیره سازی وب بر اساس مبدا (بر اساس دامنه و پروتکل) است. همه صفحات ، از یک مبدا ، می توانند داده های یکسانی را ذخیره و دسترسی داشته باشند.


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

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


اشیاorage ذخیره سازی وب 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) + 1;
} else {
  localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
localStorage.clickcount + " time(s).";

جلسه ذخیره سازی شی

sessionStorageشی به شی محلی برابر است، به جز که ذخیره داده ها برای تنها یک جلسه. با بسته شدن کاربر در برگه مرورگر ، داده ها حذف می شوند.

مثال زیر تعداد دفعات کلیک کاربر بر روی یک دکمه را در جلسه فعلی محاسبه می کند:

مثال

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.";

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها