آموزش ذخیره سازی در وب Web Storage API HTML

آموزش ذخیره سازی در وب Web Storage API HTML

آموزش ذخیره سازی در وب Web Storage API HTML: با web storage، برنامه های کاربردی وب می توانند داده ها را به صورت محلی در مرورگر کاربر ذخیره کنند.

قبل از HTML5، داده های برنامه باید در کوکی ها ذخیره می شد که در هر درخواست سرور گنجانده می شد. web storage ایمن تر است و مقادیر زیادی از داده ها را می توان به صورت محلی ذخیره کرد، بدون اینکه بر عملکرد وب سایت تأثیر بگذارد.

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

زمان مطالعه: 3 دقیقه
بازدید: 1014
پرسش و پاسخ: 0

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

web storage در html را چه مرورگرهایی پشتیبانی میکنند

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

web storage HTML دو شی را برای ذخیره داده ها در مشتری فراهم می کند:

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

بیشتر بدانیم : جدا کردن سه رقم سه رقم اعداد با jquery جی کوئری

قبل از استفاده از فضای web storage، پشتیبانی مرورگر برای localStorage و sessionStorage را بررسی کنید:

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

localStorage Object

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

برای مثال:

// Store
localStorage.setItem("lastname", "Smith");

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

مثال توضیح داده شده:

یک جفت نام/مقدار localStorage با name="Lastname" و value="Smith" ایجاد کنید
مقدار "lastname" را بازیابی کنید و آن را در عنصر با id = "result" وارد کنید

بیشتر بدانیم : آموزش لاراول کاربردی

مثال بالا را نیز می توان اینگونه نوشت:

// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;

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

localStorage.removeItem("lastname");

نکته: جفت‌های Name/Value همیشه به‌عنوان رشته‌ها ذخیره می‌شوند. به یاد داشته باشید که در صورت نیاز آنها را به فرمت دیگری تبدیل کنید!

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

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 Object

شی sessionStorage برابر با شی localStorage است، با این تفاوت که داده ها را فقط برای یک جلسه ذخیره می کند. هنگامی که کاربر برگه مرورگر خاص را ببندد، داده ها حذف می شوند.

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

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

بیشتر بدانیم: آموزش Web Workers API یا اجرا در پس زمینه در html 

بهزاد میرزازاده
مسیر درست با پرسش های درست ساخته می شود

مشاهده تمام مطالب نویسنده