אחסון מידע בדפדפן עם Local Storage

פוסט זה כולל טיפ קצר בנושא פיתוח Front End. אם אתם רוצים ללמוד יותר לעומק על פיתוח Front End מהבסיס ועד הנושאים המתקדמים תשמחו לשמוע שבניתי קורס וידאו מקיף בנושא זה הכולל מעל 50 שיעורי וידאו והמון תרגול מעשי.
למידע נוסף והצטרפות לקורס בקרו בדף קורס Front End באתר.

הפוסט הזה הוא פרק לדוגמא מקורס Front End שאני כותב עכשיו מחדש. מקווה שתהנו ממנו או אם אתם כבר מכירים את הנושא ספרו לי מה דעתכם על ההסבר והדוגמא.

1. מהו Local Storage

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

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

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

הממשק לשמירת נתונים בדפדפן הוא מאוד פשוט ומבוסס על הרעיון הבא:

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

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

בנוסף בגלל שהמידע שמור בדפדפן של המשתמש אנחנו נשתמש ב Local Storage רק כדי לשמור מידע אליו לגולש יש גישה ושאין לנו בעיה שהגולש ישנה אותו אצלו מקומית.

2. איך שומרים מחרוזת לפעם הבאה

בשביל להשתמש ב localstorage ולשמור מחרוזת בתוך הדפדפן נשתמש בפקודה הבאה:

localStorage.setItem('language', 'JavaScript');

אחרי שהרצתם את הפקודה צאו מהדפדפן ופיתחו אותו חזרה על אותו עמוד.

לאחר הפתיחה חזרה עברו למסך כלי הפיתוח וחפשו שם את הטאב Storage ב Firefox או Application ב Chrome, ובתוכו מצאו את הלשונית Local Storage. לחיצה עליה תציג לכם את כל פריטי המידע שאתר זה שומר עליכם, במקרה שלנו כנראה שנמצא שם את המפתח היחיד language.

בשביל לטעון את המידע נוכל להשתמש בפקודה:

localStorage.getItem('language')

ובשביל למחוק את המידע נוכל להשתמש בפקודה:

localStorage.removeItem('language')

המילה language היא שם פריט המידע ואתם יכולים לבחור במקומה כל שם שתירצו. מאגר המידע Local Storage מתפקד כמו אוביקט, אז אם תשמרו פריט מידע למפתח שכבר קיים הערך הקודם יידרס.

3. איך שומרים מספרים לפעם הבאה

בשביל לשמור מספרים ב local storage נצטרך להמיר את הערך למספר כשאנחנו קוראים אותו. הפקודה Number לוקחת מחרוזת וממירה אותה למספר. בואו נכתוב יחד תוכנית שמציגה מספר על המסך, מעלה אותו ב-1 בכל לחיצה על כפתור ושומרת אותו כך שבפעם הבאה שניכנס לעמוד הערך הקודם יחכה לנו.

נתחיל עם קוד ה HTML הבא:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF8" />
        <title>Local Storage</title>
    </head>    

    <body>
        <button>Click Here</button>
        <p>Count: <span id="value"></span></p>

        <script src="demo1.js"></script>
    </body>
</html>

בצד ה JavaScript אנחנו צריכים לחלק את התוכנית ל-3 חלקים: תחילה נציג את המספר 0 ונעלה אותו ב-1 עם כל לחיצה; לאחר מכן נעדכן את הקוד כך שישמור את המספר ב Local Storage ונראה את הערך נשמר בדפדפן; לסיום נעדכן את הקוד כך שבטעינת העמוד הוא יטען את הערך מ Local Storage.

הגירסא הבאה מציגה את הערך ומעלה אותו ב-1 עם כל לחיצה:

const btn = document.querySelector('button');
const result = document.querySelector('#value');

let val = 0;
result.textContent = val;


function inc() {
    result.textContent = ++val;
}

btn.addEventListener('click', inc);

בשביל לשמור ב Local Storage אחרי כל שינוי אנחנו רק צריכים להוסיף את השורה הבאה לתוך הפונקציה inc:

localStorage.setItem('counter', val);

ובשביל לטעון את הערך מ Local Storage בעליה נחליף את האתחול של val בקוד הבא:

let val = Number(localStorage.getItem('counter')) || 0;

סך הכל הקוד נראה כך:

const btn = document.querySelector('button');
const result = document.querySelector('#value');

let val = Number(localStorage.getItem('counter')) || 0;
result.textContent = val;


function inc() {
    result.textContent = ++val;
    localStorage.setItem('counter', val);
}

btn.addEventListener('click', inc);

4. איך שומרים כל אוביקט לפעם הבאה

הפקודה JSON.stringify של JavaScript לוקחת כל אוביקט או מערך של JavaScript והופכת אותו למחרוזת. הפקודה המקבילה לה JSON.parse לוקחת מחרוזת שמייצגת אוביקט או מערך והופכת אותה למבנה הנתונים המתאים לה. שילוב שתי הפקודות יאפשר לנו לשמור כל מידע מהתוכנית בתוך ה Local Storage.

בואו ננסה את זה. כתבו את הקוד הבא בתוך הקונסול של הדפדפן:

const data = { one: 10, two: 'hello world', three: [10, 20, 30] };
JSON.stringify(data);

והתוצאה היא המחרוזת:

"{\"one\":10,\"two\":\"hello world\",\"three\":[10,20,30]}"

את זה נוכל לשמור ב Local Storage. אגב בשביל להפוך אותה חזרה לאוביקט פשוט צריך להפעיל JSON.parse על המחרוזת באופן הבא:

const dataAsText = JSON.stringify(data);
JSON.parse(dataAsText)

5. דוגמא: שמירת מידע בטופס אחרי כל שינוי

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

נתחיל עם קובץ ה HTML הבא:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF8" />
        <title>Local Storage</title>
    </head>    

    <body>
        <form>
            <label>
                Name: 
                <input type="text" name="name" />
            </label>

            <label>
                Email:
                <input type="email" name="email" /> 
            </label>

            <label>
                Gender
                <select name="gender">
                    <option value="1">Male</option>
                    <option value="2">Female</option>
                </select>
            </label>
        </form>
        <script src="demo2.js"></script>
    </body>
</html>

ונכתוב את הקוד בקובץ demo2.js כדי שכל שינוי טקסט באיזשהו שדה בקובץ ישמור את כל תוכן כל השדות ב Local Storage.

כדאי להקשיב לאירוע input על הטופס ולא על כל השדות. כך במקום אחד אפשר לתפוס את כל השינויים.
בכל פעם שיש שינוי באחד השדות, נרשום את כל הטקסט מכל השדות ל Local Storage.
בעליה של המערכת בפעם הבאה נטען מ Local Storage את המידע ונכתוב אותו לשדות שבטופס.

מוזמנים לנסות לכתוב את זה לבד. הקוד שלי הוא:

const form = document.querySelector('form');

function writeDataToForm(data) {    
    let inp;
    const names = Object.keys(data);
    for (let name of names) {
        inp = form.querySelector(`[name="${name}"]`);
        inp.value = data[name];
    }
}

function readFormFieldsAsObject() {
    const data = {};
    const inputs = form.querySelectorAll('input,select');
    for (let inp of inputs) {
        data[inp.name] = inp.value;
    }
    return data;
}

function saveEverythingToLocalStorage() {
    const data = readFormFieldsAsObject();
    localStorage.setItem('formData', JSON.stringify(data));
}

function loadFieldsFromLocalStorage() {
    const data = localStorage.getItem('formData');
    try {
        const parsedData = JSON.parse(data);
        writeDataToForm(parsedData);
    } catch(err) {
        console.log(err);
        console.log('Invalid Data: ' + data);
        localStorage.removeItem('formData');
    }
}

form.addEventListener('input', saveEverythingToLocalStorage);
loadFieldsFromLocalStorage();