فضای ذخیره سازی وب در HTML

فضای ذخیره سازی وب یا web storage، بهتر از کوکی ها(cookies) می باشد.

فضای ذخیره سازی وب(Web Storage) در HTML چیست؟

با استفاده از فضای ذخیره سازی وب(web storage)، اپلیکیشن های وب می توانند داده ها را به صورت محلی در داخل مرورگر کاربر، ذخیره کنند. قبل از HTML5، داده های اپلیکیشن ها باید درون کوکی ها(cookies) که در هر درخواست سرور(server request) اضافه شده بودند، ذخیره می شد.

فضای ذخیره سازی وب(Web storage) امن تر است و حجم زیادی از داده ها، می توانند به صورت محلی در آن ذخیره شوند؛ بدون اینکه بر کاراییِ وب سایت(website performance) تاثیر بگذارند. برخلاف کوکی ها، در فضای ذخیره سازی وب، محدوده ی ذخیره سازی بسیار بیشتر است(حداقل 5 مگابایت) و اطلاعات هرگز به سرور منتقل نمی شوند.فضای ذخیره سازی وب(Web storage) در مبدا(origin) قرار دارد(در دامنه و پروتکل). تمام صفحاتی که در یک مبدا قرار دارند، می توانند ذخیره شوند و به داده های یکسانی دسترسی داشته باشند.

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

اعداد درون جدول زیر، اولین ورژن مرورگری را مشخص می کنند که کاملا از فضای ذخیره سازی وب(Web Storage) پشتیبانی می کند:

					API
4.0	8.0	3.5	11.5	4.0	Web Storage

آبجکت های Web Storage(فضای ذخیره سازی وب) در HTML

فضای ذخیره سازی وب(web storage) در HTML دو آبجکت را برای ذخیره ی داده در کلاینت(client) ارائه می دهد:

1. window.localStorage : داده ها را بدون تاریخ انقضا ذخیره سازی می کند.
2. window.sessionStorage : داده ها را برای یک سشن(session) ذخیره می کند(وقتی که تب مرورگر بسته شود، داده ها از بین می روند).

قبل از اینکه از فضای ذخیره سازی وب(web storage) استفاده کنیم، باید بررسی کنیم که آیا مرورگر از localStorage و sessionStorage پشتیبانی می کند یا خیر.

if (typeof(Storage) !== "undefined") {
  // localStorage/sessionStorage کدها برای
} else {
  // متاسفانه مرورگر شما از فضای ذخیره سازی وب پشتیبانی نمی کند
}

آبجکت  localStorage در HTML

آبجکت localStorage داده ها را بدون تاریخ انقضا ذخیره سازی می کند. این داده ها، وقتی که مرورگر بسته شود، حذف نمی شوند و در روزها، هفته ها یا سالهای بعد در دسترس خواهند بود.

//ذخیره سازی داده
localStorage.setItem("lastname", "Smith");

// بازیابی داده 
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

 توضیح مثال بالا:

• ابتدا یک localStorage به صورت یک مقدار جفتیِ name/value ایجاد کردیم که نام آن lastname و مقدار آن Smith است.
• سپس مقدار lastname را بازیابی کردیم و آن را در داخل یک عنصر HTML که آیدی آن id="result" است، قرار دادیم.

مثال بالا، می تواند به صورت زیر نیز نوشته شود:

// ذخیره سازی داده
localStorage.lastname = "Smith";
// بازیابی داده
document.getElementById("result").innerHTML = localStorage.lastname;

سینتکس برای حذف آیتم "lastname" در ذخیره سازی محلی(localStorage) به صورت زیر است:

localStorage.removeItem("lastname");

نکته: جفت های name/value همواره به صورت رشته(string) ذخیره می شوند. به یاد داشته باشید که در صورت نیاز، آنها را به یک فرمت دیگر تبدیل کنید.

مثال زیر، تعداد دفعاتی که یک کاربر، روی یک دکمه کلیک کرده است را شمارش می کند. در این کد، مقدار(value) که به صورت رشته(string) است، به یک عدد تبدیل شده است که می تواند شمارشگر را افزایش دهد:

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 در HTML

آبجکت sessionStorage معادل با آبجکت localStorage است به جز اینکه این آبجکت، داده ها را تنها برای یک سشن(session) ذخیره سازی می کند. در این آبجکت، وقتی که کاربر تب مرورگر را ببندد، داده ها حذف خواهند شد. در مثال زیر، تعداد دفعاتی که یک کاربر بر روی یک دکمه کلیک کرده است، در سشن فعلی(current 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.";