שמירת נתונים בצד הלקוח ב- HTML5

בעבר כאשר היינו רוצים לשמור נתונים בצד של המשתמש היינו משתמשים ב-cookie.

ב-HTML 5 הוסיפו לנו 2 אפשרויות נוספות  שמוסיפות לנו כוח נוסף מבחינה תכנותית: localStorage ו- sessionStorage.

במאמר זה אסביר עליהם, על ההבדלים ביניהם, אתן דוגמאות איך משתמשים בהם, על ההבדלים בין כל אחד מהם לשימוש ב-cookie ואיך הם עוזרים לנו.

 

localStorage

נתונים שנשמור באמצעות ה- localStorage לא נמחקים עד שאנחנו נמחוק אותם או שהמשתמש ימחוק אותם ידנית, כלומר, גם כאשר הוא יכבה וידליק את המחשב הנתונים האלה ישמרו לנו.

ז"א, שבאופן שונה מה-cookie, שבו היה תאריך שהמידע ששמרנו הופך להיות "פג תוקף" ונמחק, במקרה של ה- localStorage המידע ישמר גם לאחר זמן רב (אפילו שנים).

 

sessionStorage

נתונים שנשמור באמצעות ה- sessionStorage נשמרים רק לאורך ה-session הנוכחי של המשתמש. ז"א, שברגע שהמשתמש סוגר את הדפדפן המידע נמחק.

רק בשביל להסיר ספק, העובדה שהמידע ב- sessionStorage נמחק בצורה אוטומטית לא אומר שהוא לא יכול להימחק בצורה ידנית באמצעות פונקצית המחיקה של הנתונים.

 

מה משותף לשניהם?

המידע נשמר כמחרוזת (string) אז צריך לקחת את זה בחשבון כאשר מושכים משם מידע ולעשות לו המרה בהתאם במידה ונרצה להמיר אותו למספר למשל.

 

איך עובדים עם localStorage ו- sessionStorage

מאחר ולשניהם יש API זהה, אדגים איך עובדים עם localStorage, אך שימו לב שאופן ההעבודה עם sessionStorage הוא זהה, וההבדלים בינהם נעשים "מאחורי הקלעים" מבחינתינו.

על מנת להשתמש ב-sessionStorage במקום ב-localStorage בדוגמאות הבאות רק צריך להחליף את האובייקט localStorage ב-sessionStorage.

בהמשך אני אדגים שימוש בפונקציות על ידי שמירה, קריאה ומחיקה של UserName למשתנה ב-storage. רק אציין שהשימוש ב-storage הוא לא מאובטח ולא מומלץ לשמור בו מידע רגיש על המשתמש או כל מידע רגיש אחר.

 

שמירה של נתונים

ניתן לשמור נתונים בשתי דרכים, בדוגמאות הבאות אשמור למשתנה UserName את הערך David:

localStorage.setItem("UserName", "David");

או

localStorage.UserName = "David";

בדיקה עם המשתנה קיים

בדוגמא זו אבדוק אם המשתנה UserName קיים. במידה וכן נקבל true, במידה ולא נקבל false

typeof(localStorage.UserName)==='undefined' 

 

קריאת נתונים

גם משיכת הנתונים יכולה להתבצע בשתי דרכים.

בדוגמאות הבאות אמשוך את הערך שנשמר במשתנה UserName לתוך המשתנה storageData:

var storageData = localStorage.getItem("UserName");

או

var storageData = localStorage.UserName;

 

מחיקת נתונים

בדוגמא הבאה אמחוק את הערך הקיים במשתנה UserName:

localStorage.removeItem("UserName");

 

תגיות:

הוסף תגובה