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

API ذخیره‌سازی وب (Web Storage) در HTML

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

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

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

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

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

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

اشیاء (Objects) در API ذخیره‌سازی وب

ذخیره‌سازی وب دو شیء برای ذخیره داده در مرورگر فراهم می‌کند:

• window.localStorage - داده‌ها را بدون تاریخ انقضا ذخیره می‌کند (داده‌ها با بسته شدن تب مرورگر از بین نمی‌روند).

• window.sessionStorage - داده‌ها را برای یک نشست (session) ذخیره می‌کند (داده‌ها با بسته شدن تب مرورگر از بین می‌روند).

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

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

تست پشتیبانی از API ذخیره‌سازی وب

پیش از استفاده از ذخیره‌سازی وب، می‌توانیم به‌سرعت پشتیبانی مرورگر از localStorage و sessionStorage را بررسی کنیم:

مثال

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

<script>
  const x = document.getElementById("result");
  if (typeof(Storage) !== "undefined") {
    x.innerHTML = "Your browser supports Web storage!";
  } else {
    x.innerHTML = "Sorry, no Web storage support!";
  }
</script>

شیء localStorage

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

مثال

استفاده از localStorage برای تنظیم و بازیابی جفت‌های نام و مقدار:

<script>
  const x = document.getElementById("result");

  if (typeof(Storage) !== "undefined") {
    // Store
    localStorage.setItem("lastname", "Smith");
    localStorage.setItem("bgcolor", "yellow");
    // Retrieve
    x.innerHTML = localStorage.getItem("lastname");
    x.style.backgroundColor = localStorage.getItem("bgcolor");
  } else {
    x.innerHTML = "Sorry, no Web storage support!";
  }
</script>

توضیح مثال:

• از متد localStorage.setItem() برای ایجاد جفت‌های نام/مقدار استفاده کنید.

• از متد localStorage.getItem() برای بازیابی مقادیر تنظیم‌شده استفاده کنید.

• مقدار "lastname" را بازیابی کرده و آن را در عنصری با شناسه‌ی id="result" قرار دهید.

• مقدار "bgcolor" را بازیابی کرده و آن را در استایل backgroundColor عنصری با شناسه‌ی id="result" قرار دهید.

سینتکس حذف آیتم localStorage با نام "lastname" به شکل زیر است:

localStorage.removeItem("lastname");

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

شمارش کلیک‌ها با localStorage

مثال زیر تعداد دفعاتی که یک کاربر روی دکمه‌ای کلیک کرده است را می‌شمارد. در این کد، مقدار رشته‌ای به عدد تبدیل می‌شود تا شمارنده بتواند افزایش یابد:

مثال

<script>
  function clickCounter() {
    const x = document.getElementById("result");
    if (typeof(Storage) !== "undefined") {
      if (localStorage.clickcount) {
        localStorage.clickcount = Number(localStorage.clickcount) + 1;
      } else {
        localStorage.clickcount = 1;
      }
      x.innerHTML = "You have clicked the button " + localStorage.clickcount + " time(s)!";
    } else {
      x.innerHTML = "Sorry, no Web storage support!";
    }
  }
</script>

شیء sessionStorage

شیء sessionStorage مشابه شیء localStorage است، با این تفاوت که داده‌ها را فقط برای یک نشست (session) ذخیره می‌کند! داده‌ها زمانی که کاربر تب مرورگر مربوطه را می‌بندد، حذف می‌شوند.

شمارش کلیک‌ها با sessionStorage

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

مثال

<script>
  function clickCounter() {
    const x = document.getElementById("result");
    if (typeof(Storage) !== "undefined") {
      if (sessionStorage.clickcount) {
        sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
      } else {
        sessionStorage.clickcount = 1;
      }
      x.innerHTML = "You have clicked the button " + sessionStorage.clickcount + " time(s) in this session!";
    } else {
      x.innerHTML = "Sorry, no Web storage support!";
    }
  }
</script>