ذخیره‌سازی محلی HTML

ذخیره‌سازی محلی HTML: بهتر از کوکی‌ها.

HTML ذخیره‌سازی محلی چیست؟

از طریق ذخیره‌سازی محلی (Local Storage)، برنامه‌های وب قادر به ذخیره داده‌ها به صورت محلی در مرورگر کاربر هستند.

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

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

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

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

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

API
Web Storage 4.0 8.0 3.5 4.0 11.5

پروژه HTML ذخیره‌سازی محلی

HTML ذخیره‌سازی محلی دو پروژه برای ذخیره‌سازی داده‌ها در سرور ارائه می‌دهد:

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

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

if (typeof(Storage) !== "undefined") {
    // کد برای localStorage/sessionStorage
} else {
    // متاسفم! پشتیبانی از Web Storage وجود ندارد ..
}

پروژه localStorage

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

مثال

// ذخیره‌سازی
localStorage.setItem("lastname", "Gates");
// بازیابی
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

آزمایش کنید

توضیح مثال:

  • پروژه localStorage نام/مقدار ایجاد می‌شود که: name="lastname"، value="Gates"
  • مقدار "lastname" بازیابی شده و به عنصر با id="result" اضافه می‌شود

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

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

عبارت دستور برای حذف پروژه localStorage "lastname" به شرح زیر است:

localStorage.removeItem("lastname");

توجه: نام/مقدار همیشه به عنوان رشته ذخیره می‌شوند. اگر نیاز دارید، حتماً آن‌ها را به فرمت‌های دیگر تبدیل کنید!

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

مثال

if (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
    localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "شما این دکمه را " +
localStorage.clickcount + " بار.";

آزمایش کنید

موضوع sessionStorage

موضوع sessionStorage مشابه localStorage است، اما تفاوت‌اش این است که فقط داده‌ها را برای یک session ذخیره می‌کند. اگر کاربر یک برگه مرورگر خاص را ببندد، داده‌ها نیز حذف می‌شوند.

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

مثال

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "در این session، شما این دکمه را " +
sessionStorage.clickcount + " بار.";

آزمایش کنید