ذخيره داده ها بر روي کامپيوتر کاربر (Client)
local storage چیست ؟
local Storage یکی از امکانات جدیدی است که برای ذخیره اطلاعات در مرورگر کاربر در html5 اضافه شده و دارای دو متغیر نام و مقدار است.
در گذشته برنامه نویسان وب از این روش استفاده می نمودند که کلیه اطلاعات موجود دردیتابیس را که در برنامه نیاز داشتند, به صورت آنی و در همان لحظه ازبانک اطلاعاتی واکشی و استفاده میکردند که تاثیر بسزایی در کاهش سرعت برنامه داشت, بعد از گذشت مدتی دو مقوله coockie و sessionها وارد فرهنگ لغت وب و مرورگرها شدند که تا حدی نیاز به ذخیره اطلاعات و تراکنش های متعدد با بانک اطلاعاتی را کاهش میدادند.
در نوع خودش و در زمان خودش ابزارهای خوب و مفیدی بودند اما نا توانائیهایی هم به همراه داشتند که در پروژه های وب بزرگ نمی شد مورد استفاده قرار بگیرند.
کوکي ها براي تعداد زياد داده کارايي ندارد، زيرا کوکي ها با هر بار درخواست از سرور انتقال پيدا مي کنند، که اين باعث کاهش سرعت و عدم کارايي مناسب مي شود.
Local Storage روش مطمئن تری نسبت به کوکی ها ست، و به وسیله آن اطلاعات بیشتری را می توان ذخیره کرد، بدون اینکه اختلالی در عملکرد وب سایت به وجود بیاید.
بر خلاف کوکی ها، در HTML5 داده ها با هر بار درخواست از سرور ارسال نمي شوند و فقط زماني که نياز به آنها داشته باشيم استفاده مي شوند.
داده هاي سايت هاي مختلف بصورت key/value ذخيره مي شوند و هر وب سايت فقط به داده هايي که خودش ذخيره کرده مي تواند دسترسي پيدا کند.
HTML5 از JavaScript براي ذخيره سازي و دسترسي به داده ها استفاده مي کند.
پشتيباني مرورگرها
مرورگرهاي Internet Explorer 8+, Firefox, Opera, Chrome, Safari ذخيره داده ها را پشتيباني مي کنند.
توجه: Internet Explorer 7 و نسخه هاي قديمي تر آن، web storage را پشتيباني نمي کنند.
localStorage و sessionStorage
HTML5 دو شيء جديد براي ذخيره سازي داده ها بر روي کلاينت معرفي کرده است:
localStorage: ذخيره داده ها بدون زمان انقضاء
sessionStorage: داده هاي يک جلسه (session) را ذخيره مي کند.
قبل از استفاده از اشياء بالا، بايد بررسي کنيد که مرورگر، localStorage و sessionStorage را پشتيباني مي کند يا نه.
if(typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
} else {
// Sorry! No Web Storage support..
}
شيء localStorage
اين شيء داده ها را براي زمان نامحدودي (بدون زمان انقضا) ذخيره مي کند. زماني که مرورگر بسته شود داده ها حذف نخواهد شد و روز بعد، هفته بعد و حتي سال بعد در دسترس خواهد بود.
مثال :
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
توضیح کد :
ابتدا يک شيء loaclStorage با نام "lastname" و مقدار "Smith" ايجاد شده است.
سپس مقدار "lastname" را بازيابي مي کنيم و سپس محتواي عنصر با شناسه "result" را با آن مقداردهي مي کنيم.
کد بالا را به صورت زیر هم می توان نوشت :
// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;
نکته : داده ها هميشه بصورت رشته اي ذخيره مي شوند. بياد داشته باشيد که در صورت نياز بايد آنرا تبديل کنيد.
مثال زیر تعداد دفعاتی که کاربر روی یک دکمه کلیک کرده را نشان می دهد. مقدار رشته اي به عددي تبديل شده است:
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
شی ء sessionStorage مانند شی ء loaclStorage است، با این تفاوت که داده را فقط یک جلسه ذخیره می کند. زمانی که کاربر پنجره مرورگر را ببندد این داده ها از بین می روند.
مثال زير، تعداد دفعات کليک کاربر روي يک دکمه در جلسه جاري را نشان مي دهد:
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.";