אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » מדריכים » HTML 5 » localStorage vs sessionStorage

localStorage vs sessionStorage

רן בר-זיק נובמבר 13, 2011 8:10 am תגובה אחת

הסבר קצר, מהיר ואלגנטי על שתי השיטות בתקן HTML5 שמחליפות את העוגיות כאמצעי אחסון מידע

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

עד היום, השתמשנו בשתי דרכים עיקריות לאחסן מידע בצד הלקוח – הראשונה היא שימוש בעוגיות דפדפן. השניה היא אחסון מידע בעוגיות מבוססות פלאש.

לאחסון המידע בעוגיות יש את המגבלות שלו – המגבלה הקשה ביותר היא מגבלת המקום, ארבעה קילובייט בלבד. בנוסף המידע שנמצא בעוגיות קשה יחסית, מבחינה תכנותית, לשליפה ולמניפולציה.אם אנו רוצים להתגבר על שתי המכשלות האלו עם פלאש, אנו צריכים לצאת מנקודת הנחה שלא לכל דפדפן יש פלאש, במיוחד עם המערכות של היום (למערכות ניידות אין תמיד פלאש).

תקן HTML5 מאפשר לנו שיטות חדשות לאחסון נתונים בצד הלקוח, שתיים מתוכן אמורות להחליף את העוגיות. שתיהן דומות למדי אך עם הבדל מאד משמעותי.

חלק גדול מהטקסט ומהדוגמאות באתר נלקחו מתוך ההרצאה שלי בכנס השנתי של ה-W3C.

השיטה הראשונה שאני רוצה לדבר עליה היא localStorage.

localStorage היא דרך לאחסן נתונים בפורמט של key=>value באופן דומה למדי לעוגיות, רק שה-API הרבה יותר פשוט וחשוב מכך מגבלת המקום היא 5 מגהבייט לכלל הנתונים מדומיין מסוים.
יתרון נהדר נוסף של localStorage היא התאימות שלה, אפשר להשתמש בה בכל דפדפן מודרני וגם באינטרנט אקספלורר 8. אפשר לומר כיום שאינטרנט אקספלורר 6 נמחק לחלוטין מהמפה ואינטרנט אקספלורר 7 בדרך הבטוחה להכחדה (נכון לכתיבת שורות אלו, שישה וחצי אחוזים בלבד ממשתמשי האינטרנט בישראל משתמשים באינטרנט אקספלורר 7 והאחוז הזה יורד בהתמדה). בנוסף, הוא נתמך באופן זהה בכל הדפדפנים המודרניים כך שסביר להניח שזה אחד המנגנון הראשון של אחסון נתונים שתיגעו בו אי פעם – ולפיכך שווה להכיר אותו.

מבחינת קוד – הוא משתמש ב-API מבוסס JavaScript:


localStorage.setItem('KEY', 'VALUE');
var value = localStorage.getItem('KEY');
localStorage.clear('KEY');

מי שרוצה דוגמה חיה של זה, מוזמן למאמר שבו הדגמתי שימוש ב-localStorage וב-content editable.

ניתן לראות שהשימוש ב-localStorage הוא קל ופשוט הרבה יותר משימוש בכל עוגיה שהיא. נשאלת השאלה איך מדבגים את הסיפור הזה. בכרום זה מאד פשוט, יש ממשק נוח בכלי המפתחים שלו. בפיירפוקס זה קצת יותר מסורבל – צריך להכנס ל-console ולרשום localStorage.

דיבוג localStorage בכלי הפיתוח של כרום
דיבוג localStorage בכלי הפיתוח של כרום

טוב, זה די פשוט – לא? השיטה השניה גם היא פשוטה למדי.
sessionStorage, דומה כמעט לחלוטין ל-localStorage – ולא רק מבחינת שם. היא זהה כמעט לחלוטין מבחינת שימוש, מבחינת דיבוג מלבד העובדה שיש לפנות לאובייקט SessionStorage.


sessionStorage.setItem('KEY', 'VALUE');
var value = sessionStorage.getItem('KEY');
sessionStorage.clear('KEY');

אז מה ההבדל ביניהן?

ההבדל ביניהן הוא הבדל קטן אך מהותי – sessionStorage מתקיימת לכל אורך חיי החלון – ברגע שסגרת את החלון, המידע שנשמר ב-Session מושמד לחלוטין. בעוד המידע שנמצא ב-localSession נשמר גם לאחר סגירת החלון.
למה זה טוב? לשמירת מידע זמני שיכול להשתנות בין instance ל-instance. כך למשל, אני יכול באמצעות sessionStorage לעבוד בשני שמות משתמש תחת אותו דפדפן – רק בטאבים שונים. אם יש לי תוכנה או אפליקציה שסביר להניח שהמשתמש יעבוד עליה בחלונות מרובים – השימוש ב-SessionStorage יהיה אידיאלי עבורה ויחסוך המון המון בעיות והתנגשויות.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
»HTML5 appcache
»הרצאה: אמצעי אחסון ב-HTML5
HTML 5

תגובה אחת

  1. איציק הגב ינואר 6, 2020 בשעה 4:38 pm

    היי, האם הנתונים המאוחסנים בlocalstorage ישמרו גם כאשר משתמש אחר ממחשב אחר יפתח את האתר? ואם לא: איך עושים זאת? (כלומר, איך גורמים לשינוי תמידי באתר עבור כל מחשב או כלי מדיה אחר)

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

    הפרויקטים שאני כותב ושוחררו לציבור ברישיון קוד פתוח נמצאים ברובם בגיטהאב.
חיפוש

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד