‎‎حافظه وبHTML Web Storage API -‎

Previous >    <Next  

‎‎حافظه وب درHTML بهتر از كوكي هاست .

‎‎حافظه در وب چيستWhat is HTML Web Storage -‎

‎‎در حافظه وبي ، برنامه وبي ميتواند اطلاعات را در مرورگر كاربر ذخيره كند.

‎قبل ازHTML5 داده هاي محلي برنامه وبي بايد در كوكي ها ذخيره ميشد ، كه آنها مشمول ‎درخواستهاي سرور ميشد .حافظه وبي امن تر بوده وداده هاي محلي بيشتري را ميتوان در آن ذخيره ‎كرد، بدون اينكه تاثيري در عملكرد وبسايت بگذارد.

‎برخلاف كوكي ها ،ظرفيت ذخيره سازي بسيار بيشتراست‎)‎ ‎درحدود 5مگابايت‎ (‎ ‎واطلاعات هرگز به سرور منتقل نميشود.

‎حافظه وبي ازنظر دامنه وپروتكل از يك مبنا است، و همه صفحات داده ها را بر يك مبنا ذخيره وبآن ‎دسترسي دارند.

‎‎پشتيباني مرورگرBrowser Support -‎

‎‎در اين جدول اولين نسخه مرورگر كه از حاقظه وبي پشتيباني ميكند آمده است.

‎
‎API‎ Chorome Edge Firefox Safari Opera
‎Web Storage‎ ‎‎4.0‎ ‎‎8.0‎ ‎‎3.5‎ ‎‎4.0‎ ‎‎11.5‎

‎‎اشياء حافظه اي وبHTML Web Storage Objects -‎

‎‎حافظه وبيHTML دو نوع شي را براي ذخيره داده ها براي كلاينت پيش بيني كرده است .مطابق زير:

‎قبل از استفاده از اشياء حافظه ايlocalStorage و sessionStorae پشتيباني مرورگر را بررسي ‎كنيد، مطابق رير:

‎ 
if  (typeof(Storage) !== "undefined") {
  // Code for localStorage/sessionStorage.
} else {
  // Sorry! No Web Storage support..
}

‎‎شي حافظه محليLocalStorage Object -‎

‎شيLocalStorage داده ها را بدون تاريخ انقضاء ذخيره ميكند .مرورگر داده ها را حذف نميكند،و ‎انها در روز ، هفته وسال هاي بعدي در دسترس خواهد بود.

‎شيLocalStorage براي ذخيره سازي داده ها داراي متد setItem ميباشد .كه داراي دو پارامتر ‎مطابق فرم كلي زير است.

‎localStorage.setItem(‎"itemname‎",‎"itemvalue‎");‎

‎‎فرم ديگر ذخيره سازي بصورت زير است.

‎localStoage.itemname=‎"itemvalue‎";‎

‎‎مثال ـ ذخيره سازي داده ها باشيLocalStorage

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

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

--(go to editor for change code and run)

‎‎شـــرح مثال:

‎‎مثال بالا را نيز ميتوان بصورت زير نوشت.

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

‎‎نحوي حذف ايتم‎"lastname‎"‎ از localStorage بصورت زير است .

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

--(go to editor for change code and run)

‎‎شي جلسه كاريThe sessionStorage Object -‎

‎sessionStorage‎‎شي جلسه كاري مانندlocalstorage است .بجز اينكه آن ‎داده هاي يك جلسه كاري را ذخيره ميكند .داده ها در صورت اتمام جلسه كاري يا بستنtab مرورگر ‎حذف ميشوند.

‎‎مثال ـ در مثال زير تعداد دفعاتي كه كاربر دكمه اي را در يك جلسه كاري كليك ميكند مي شمارد.

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

--(go to editor for change code and run)

Previous >    <Next