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

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

قبل از html5، اپلیکیشن ها باید داده ها را در کوکی ها و در هر درخواست سرور قرار می دادند.

ذخیره سازی تحت وب امنیت بیشتری دارد و همچنان مقدار داده بیشتری را می توان به صورت محلی بدون تاثیر گذاشتن بر کیفیت اجرای وبسایت ذخیره کرد.

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

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

آبجکت ذخیره سازی

localstorage – ذخیره داده ها بدون تاریخ انقضاء

sessionstorage – ذخیره داده ها برای یک session، داده ها هنگام بسته شدن تب مرورگر از بین می روند.

قبل از استفاده از ذخیره سازی مبتنی بر وب، پشتیبانی مرورگر را برای localstorage و sessionstorage بررسی کنید:

if (typeof(Storage) !== “undefined”) {
  // Code for localStorage/sessionStorage.
} else {
  // Sorry! No Web Storage support..
}

آبجکت localstorage

localStorage.setItem(“lastname”, “Smith”);

// Retrieve
document.getElementById(“result”).innerHTML = localStorage.getItem(“lastname”);

localStorage.lastname = “Smith”;
// Retrieve
document.getElementById(“result”).innerHTML = localStorage.lastname;

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

مثال زیر تعداد دفعات کلیک کاربر بر روی دکمه را حساب و ذخیره می کند.

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

امیدواریم این بخش از آموزش در مورد ذخیره سازی وب در Html نیز برای شما مفید واقع شده باشد و ما را در تلگرام و اینستاگرام دنبال کنید .

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید