ذخیره‌سازی محلی 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 + " بار.";

آزمایش کنید