שמירת מידע בטלפון - Storage
div עם data-role="fieldcontain" יוצרים label ו-input. בתכונה for של התווית נותנים את ה-id של השדה. כך jQuery Mobile מסדר את התצוגה לבד, ולחיצה על התווית מעבירה את הפוקוס לשדה.select עם אפשרויות. data-placeholder="true" מונע לבחור את האפשרות הראשונה, כמו "Choose Color", ו-data-native-menu="false" מציג את הרשימה לפי jQuery Mobile ולא לפי הטלפון.localStorage.setItem("userColor", value) שומר את הערך לפי מפתח ייחודי.localStorage.getItem("userColor") מחזיר את הערך. את הקריאה כדאי לבצע בתוך אירוע deviceready, כשכל הנתונים מוכנים.select צריך לקרוא ל-selectmenu("refresh"), כדי ש-jQuery Mobile יציג אותו.change של הרשימה משנים את צבע הרקע של הדף לפי הצבע שנבחר.localStorage.clear() מוחק את כל הפריטים, ו-removeItem(key) מוחק פריט אחד.length ו-key(index) עוברים על כל הפריטים, ושולפים כל אחד לפי המפתח שלו.פרקי ההרצאה: שמירת מידע בטלפון - Storage
תמלול ההרצאה: שמירת מידע בטלפון - Storage
הטקסט המלא של הדקות הראשונות בהרצאה «שמירת מידע בטלפון - Storage» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
הדבר הבא שאנחנו הולכים לראות זה איך אנחנו יכולים לשמור מידע בתוך הטלפון הנייד של המשתמש. למה חשוב שנדע את זה? למה זה בעצם שימושי?
כי אפליקציות עובדות עם מידע. אנחנו רוצים לקלוט מידע מהמשתמש. בהמשך אנחנו נראה איך אנחנו יכולים לשלוח את המידע הזה לסרבר, ובסרבר כמובן לעשות איתו פעולה כלשהי או לעבד אותו ולהחזיר תשובה ללקוח.
אבל לא תמיד אנחנו רוצים לשלוח אותו לסרבר, וגם אם כן, יכול להיות שאנחנו רוצים לשמור אותו בצד של המשתמש, ופעם הבאה שהוא מעלה את האפליקציה להשתמש במידע הזה, או בין מעברים שונים, בין חלונות או בין טפסים או בין דפים, אנחנו גם רוצים לשלוף את המידע ולהשתמש איתו.
לדוגמה, יוזר בוחר צבע, ואנחנו רוצים בפעם הבאה להשתמש באותו הצבע, היוזר מכניס לנו את השם שלו, ואנחנו רוצים בפעם הבאה שהוא נכנס למערכת להציג לו את השם, לרשום לו Welcome Back, מוישה או משהו כזה, ומגוון דברים אחרים שדורשים מאיתנו לשמור מידע
בטלפון של היוזר. השיטה הנפוצה ביותר לשמור מידע בעולם ה-Web היום היא בעצם שימוש בקונספט של Local Storage שמגיע מ-HTML 5. אז בואו נסתכל איך אנחנו יכולים לעשות את זה.
נאפשר למשתמש לעשות שני דברים. נאפשר למשתמש לבחור או להכניס את השם שלו. עכשיו, שימו לב שאנחנו ב-user interface של jQuery Mobile. ב-JQuery Mobile יש שיטה שבה אנחנו מקבלים מידע על ידי פורם מהיוזר.
מה שאנחנו צריכים לעשות זה לפתוח div data role field contain, לבנות label, לבנות תיבת טקסט או כל רכיב input אחר, לתת שם או יותר נכון ID כרגע, לגשת ללייבל ולהגדיר for ואת ה-id.
בואו נסתכל איך זה נראה, זה נראה בצורה כזאת. יוזר יכול לבוא ולהכניס מידע, הוא יכול להקליד על הטלפון, אנחנו יכולים להקליד על המקלדת גם, מעולה.
עכשיו, אם היוזר הופך את הטלפון, אנחנו יכולים שהאמולטור יראה לנו איך עושים את זה, בואו נניח rotate left, אז אנחנו רואים אוטומטית שפתאום הלייבל מופיעה משמאל לתיבת טקסט.
זאת אומרת jQuery מובייל יודע אוטומטית איך להציג לנו את זה בצורה הטובה ביותר. נחזיר אותו בחזרה ונראה שפתאום הלייבל נמצאת מעל. מי שעושה את כל הדברים האלה זה jQuery מובייל בגלל שאנחנו משתמשים בשיטה נכונה עם דיו שעוטפת ב-Field Contain עם לייבל כמו שצריך שמחוברת לתיבת הטקסט.
זה אומר גם שאם אנחנו לוחצים על הלייבל פוקוס מיד הופך להיות בתיבה. זה חלק מהעניין אבל כרגע אפשרנו למשתמש להכניס את השם המלא שלו אני רוצה לבקש מהמשתמש עוד משהו ניקח עוד דיו נגדיר data role field contain ומה שאני רוצה לבקש מהמשתמש זה בחירה של צבע אז בואו נוסיף לכאן label עבור צבע
ניקח תגית select תן לה ID וללייבל ניתן 4 את אותו ה-ID בדיוק. כעת אנחנו יכולים להכניס מספר צבעים. יש לנו פה אופשן, ניקח לדוגמה Red, Green, Blue שאלה שלושת צבעי היסוד, Yellow, Genta ו-Cyan שאלה שלושת הצבעים המשלימים של צבעי היסוד,
מי שהתעסק בצילום מכיר את זה, ובואו נניח שאנחנו נגדיר כאן עוד אחד שנקרא פשוט Choose Color. כמה דברים שאנחנו יכולים להגדיר עבור תיבת סלקט, תכף נראה.
בואו קודם כל נבדוק אותה. נריץ, ונראה שיש לנו פה תיבת סלקט, נלחץ עליה ואנחנו רואים את כל הערכים האלה מוצגים לנו ואנחנו יכולים לבחור איזשהו ערך.
בחרנו גרים. Choose Color, נבחר Choose Color. לא יודע אם אני רוצה שהמשתמש יוכל לבחור Choose Color. בואו נוסיף עוד כמה דברים דבר ראשון יש לנו אפשרות מבחינת jQuery Mobile להוסיף כאן data placeholder true בואו נראה ספציפית אם אנחנו יכולים לבחור אותו הוא לא נותן לנו לבחור אותו מבחינת התיבה עצמה רק את האחרים אנחנו יכולים לבחור אני בוחר choose
color אני לא רואה כלום אוקיי הדבר הבא שאנחנו יכולים להגדיר מבחינת jQuery Mobile זה data-native-menu=false זה אומר שאנחנו לא רוצים שהטלפון הנייד יציג לנו את המניו בשיטה ה-native שלו כלומר כמו שראינו את התצוגה הזאת אלא לתת אפשרות ל-jquery-mobile להציג את המניו הזה כמו שהוא רוצה כמו ש-jquery-mobile
יודעת לעשות בואו נסתכל איך זה נראה נריץ את זה, נבחר ערך, ונראה כעת שזה מופיע בצורה כזאת. שימו לב שאת ה-Choose Color אני בכלל לא יכול לבחור.
עכשיו, מה אני רוצה לעשות? אני רוצה שהמשתמש מכניס לכאן ערכים, בוחר צבע, אני רוצה שהוא ילחץ על איזשהו לחצן שמירה, מעבר לדף אחר, לא משנה מה, ואני רוצה לשמור לו את שני הערכים שהוא בחר, כך שבפעם הבאה שהוא פותח את האפליקציה אני רוצה להשתמש עם הערכים השמורים ומיד להציג לו אותם.
קודם כל אנחנו צריכים להוסיף איזשהו לחצן כזה. בואו נחזור לפה בתוך האזור של ה-content ונוסיף input type button save.
נקרא לאיזושהי פונקציה save user values ואנחנו הולכים לכתוב אותה פה. ואיך בעצם אנחנו הולכים לעשות את זה? קודם כל אנחנו צריכים להשיג את המידע שברצוננו לשמור.
בואו נפתח פה משתנה, נקרא לו full name. נשיג את המידע בכל מיני, אפשר לעשות את זה בכל מיני שיטות, אפשר להשתמש ב-JavaScript טהור, אפשר להשתמש ב-JQuery בשביל להשיג את זה.
בואו נשתמש ב-JQuery. אז נלך וניקח דולר, נגיע ל-ID, יש לנו פה סולמית של התיבת טקסט txt full name, וניגש לפונקציה שנקראת val בכדי להשיג את המידע.
ניקח את הצבע, פגישה ל-ID של צל color, נקודה val. דבר ראשון, הרבה פעמים כדאי לנו פשוט לראות מה קורה עד כאן האם באמת הצלחנו לקבל את הערכים האלה או שישנה איזושהי בעיה ואם כן לטפל בה אז הרבה פעמים כדאי פשוט לעשות alert נניח full name משורשר עם color ולראות האם מוצגים
לנו הערכים הנכונים לפני שסתם נתחיל לשמור דברים לא נכונים אז אנחנו מריצים את זה user מכניס ערכים בוחר save ואנחנו רואים שאכן הצלחנו לקבל גם את השם המלא כביכול שלו וגם את הצבע שהוא בחר וכעת אנחנו יכולים להמשיך.
אז איך אנחנו שומרים אותם? אפשר להיפטר מהאלרט הזה. מה שאנחנו צריכים לעשות זה לגשת לאובייקט שנקרא Local Storage, פונקציה שנקראת Set Item, לתת איזשהו מפתח, המפתח הזה צריך להיות מפתח ייחודי, ואת הפריט.
בואו נשכפל את זה, ניקח כאן User Color, עדיף להיות עקביים עם השמות, נקרא גם לזה User Color. וכעת שמרנו למשתמש את הערכים.
אם אנחנו מריצים את זה, אנחנו מאפשרים ליוזר לבחור ערכים, הנה מוישה כהן, הנה ילו, נבצע סייב וזה נשמר.
עכשיו, אם אני מריץ שוב פעם את האפליקציה של המשתמש, אני לא מקבל את הערכים האלה מפני שלא ביצעתי טעינה שלהם.
אז כאן אנחנו צריכים ללכת ולבצע את הפעולה ההפוכה לגמרי. פעולה הפוכה לגמרי אומרת בואו נקרא מידע מהלוקל סטורג' אז בואו נעשה את זה פה.
לצורך כך מה שאנחנו צריכים לעשות זה להיזכר בקונספט של ה-Device Ready שלמדנו באחד הסרטונים האחרונים. והקונספט אומר כזה דבר אנחנו צריכים לגשת לדוקימנט Add Event Listener ולהירשם לאירוע שנקרא Device Ready.
באירוע הזה אנחנו צריכים לתת איזושהי פונקציה בואו ניתן אפילו פונקציית inline כרגע נשים פה נקודה פסיק ניכנס למסולסלות נרד ואנחנו יודעים שמה שאנחנו כותבים פה מתבצע כאשר הטלפון נטען כלומר הכל מוכן לריצה ואנחנו יכולים לעבוד עם הטלפון ומה שאנחנו רוצים לעשות בפונקציה הזאת זה פשוט להוציא את הערכים מתוך הlocal
storage ולהשתמש איתם איך אנחנו עושים את זה אנחנו פשוט פונים לlocal storage get item get item פונקציה מאוד פשוטה, היא אומרת לנו תביאו לי את המפתח הייחודי שנתתם עבור הפריט.
כל פריט אנחנו נותנים מפתח ייחודי, לדוגמה full name, ואני אביא לכם את הפריט. נשים פה איזה דבר, user color, כל מה שאנחנו צריכים לעשות זה להשתמש איתם.
לדוגמה בואו ניגש לתיבת הטקסט הזאת ונכניס בתוכה את ה-full name. בואו ניגש לתיבת ה-select הזאת ונכניס בתוכה את ה-user color.
בואו נריץ. אוקיי, קודם כל אנחנו רואים שתיבת הטקסט עובדת כמו שצריך, התיבת Select לא, מפני שזאת לא הייתה השיטה להכניס את הערך בתוך ה-value של תיבת Select.
אז בואו נמצא את השיטה הנכונה. אז למעשה יש כל מיני שיטות אחרות, אבל השיטה הזאת שהשתמשנו בה כרגע גם יכולה לעבוד. אנחנו הולכים ונותנים הוראה ל-JQueryMobile לרפרש את ה-Select.
אוקיי, בואו ניתן לו את ההוראה הזאת. נגדיר לו כאן סולמית צל Color. יש לנו פה את Select Menu, רפרש. זאת הוראה של JQueryMobile וזה אמור לרפרש לנו את הנתונים ולהציג את המידע הזה.
בואו נריץ ואנחנו אכן רואים גם את שם המשפחה וגם את הצבע. אוקיי, בואו נבצע עוד משהו עם זה ובואו נשתמש בצבע בשביל לצבוע את הצבע רקע של הדף עצמו.
אז למעשה מה שאנחנו צריכים לעשות זה לתפוס אירוע בחירה. בואו נלך לתיבת ה-select, תפוס אירוע, בואו ניקח את onChange. נקרא לפונקציה ChangeColor, נכתוב אותה פה, קודם כל נרים בה alert רק בכדי לראות אכן הפונקציה הזאת מתבצעת כאשר אנחנו מבצעים בחירה.
עוד פעם את זה, נשים אותו פה ליד, Go Solution Explorer, קונטרול F5,