webStorage – فضای ذخیره سازی وب

webStorage یا فضای ذخیره سازی وب، قابلیت جدیدی در HTML5 است که امکان ذخیره سازی داده را در مرورگر کاربر فراهم می سازد. webStorage همانند کوکی بوده با این تفاوت که دارای امنیت و سرعت بیشتر و همچنین قابلیت ذخیره اطلاعات بیشتری ( حداقل 5 مگابایت – این اندازه برای مرورگرهای مختلف، متفاوت است ) را نسبت به کوکی ( حداکثر 4 کیلوبایت ) دارا می باشد. تفاوت دیگر در دامنه عملیاتی آن است. webStorage تنها در طرف کاربر قابل مدیریت است که برخلاف کوکی ها که می توانند در هردو سطح طرف کاربر و طرف سرور قابل دسترس باشند.

 

webStorage دو نوع فضای ذخیره سازی ارائه می دهد :

localStorage : ذخیره داده به طور دائمی – با بستن صفحه یا مرورگر، داده ها همچنان ماندگار خواهند بود.

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

 

گرچه تمامی مرورگرهای مطرح این قابلیت را پشتیبانی می کنند، ولی با اینحال برای اطمینان بیشتر، با استفاده از کد زیر، وجود این قابلیت را بررسی می کنیم :

If(typeof(Storage) !== "undefined")

{

//Enter your code here.

}

Else

{

alert("webStorage is not supported.");

}

ایجاد localStorage

برای ایجاد localStorage از تابع setItem استفاده می کنیم :

localStorage.setItem("name", "value");

name و value به ترتیب نام و مقدار localStorage را تعیین می کنند :

localStorage.setItem("username", "kamal.mz");

همچنین می توانید به روش زیر یک localStorage ایجاد کنید :

localStorage.username = "kamal.mz";

بازیابی localStorage

تابع getItem با گرفتن نام localStorage به عنوان آرگومان، مقدار آن را در خروجی برمیگرداند:

alert(localStorage.getItem("username"));                            //output : kamal.mz

یا به روشی دیگر :

localStorage.username;

حذف localStorage

برای حذف یک localStorage معین، از تابع removeItem است استفاده می کنیم :

localStorage.removeItem("username");

sessionStorage

sessionStorage هم همانند localStorage استفاده می شود.

sessionStorage.setItem("username", "kamal.mz");

کد زیر، تعداد دفعاتی که کاربر روی دکمه کلیک می کند را با استفاده از sessionStorage پیاده سازی می کند :

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

 

برای مطالعه بیشتر به سایت www.w3schools.com مراجعه کنید.