Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

אחסון מידע - ל-websql ו-indexdb רן בר-זיק

2,465 views

Published on

  • Be the first to comment

  • Be the first to like this

אחסון מידע - ל-websql ו-indexdb רן בר-זיק

  1. 1. ‫אחסון מידע ב-5‪HTML‬‬ ‫רן בר-זיק‬‫מפתח ‪ PHP‬בחברת ‪HP Software‬‬ ‫אתר אינטרנט ישראל‬ ‫‪www.internet-israel.com‬‬
  2. 2. ‫שיטות קיימות לאיחסון מידע‬ ‫• עוגיות מבוססות דפדפן‬‫ניהול המידע נעשה באמצעות ‪JavaScript‬‬ ‫‪document.cookie‬‬ ‫• עוגיות מבוססות פלאש‬‫ניהול המידע נעשה באמצעות ‪JavaScript‬‬ ‫המתממשק לפלאש‬
  3. 3. ‫חסרונות העוגיות‬ ‫בעוגיה מבוססת ‪:JavaScript‬‬ ‫1. מקום מוגבל לארבעה קילובייט.‬ ‫2. קושי בניהול הנתונים.‬ ‫בעוגיה מבוססת פלאש:‬‫1. לא ניתן להסתמך על כך שיהיה פלאש‬ ‫בכל מכשיר.‬
  4. 4. ‫‪localStorage‬‬‫אחסון בפורמט ‪key=>value‬‬ ‫•‬ ‫‪ API‬נוח ופשוט‬ ‫•‬ ‫אחסון של עד 5 ‪Mb‬‬ ‫•‬ ‫מימוש זהה בכל הדפדפנים‬ ‫•‬‫נתמך באינטרנט אקספלורר 8‬ ‫•‬
  5. 5. localStorage – API :‫אחסון נתונים‬localStorage.setItem(KEY, VALUE); :‫שליפת נתון‬var value = localStorage.getItem(KEY); :‫מחיקת נתון‬localStorage.clear(KEY); :‫מחיקת כל הנתונים‬localStorage.clear();
  6. 6. localStorage – Chrome Debugging
  7. 7. localStorage – FireFox Debugging
  8. 8. ‫‪SessionStorage‬‬ ‫אחסון בפורמט ‪key=>value‬‬ ‫•‬ ‫‪ API‬נוח ופשוט‬ ‫•‬ ‫אחסון של עד 5 ‪Mb‬‬ ‫•‬ ‫מימוש זהה בכל הדפדפנים‬ ‫•‬ ‫נתמך באינטרנט אקספלורר 8‬ ‫•‬‫מבחינה חוקית – לא נחשב כעוגיה‬ ‫•‬
  9. 9. sessionStorage – API :‫אחסון נתונים‬sessionStorage.setItem(KEY, VALUE); :‫שליפת נתון‬var value =sessionStorage.getItem(KEY); :‫מחיקת נתון‬sessionStorage.clear(KEY); :‫מחיקת כל הנתונים‬sessionStorage.clear();
  10. 10. sessionStorage - chrome Debugging
  11. 11. sessionStorage - FireFox debugging
  12. 12. ‫‪Session vs Local‬‬ ‫המאוחסנים ב-‪localSorage‬‬ ‫• הנתונים‬ ‫גם לאחר סגירת החלון.‬ ‫נשמרים‬ ‫הם חד חד ערכיים לכל דומיין.‬ ‫הנתונים‬‫המאוחסנים ב-‪sessionStorage‬‬ ‫• הנתונים‬ ‫רק לאורך חיי החלון.‬ ‫נשמרים‬ ‫הם חד חד ערכיים לכל חלון.‬ ‫הנתונים‬
  13. 13. ‫‪Application Cache‬‬‫• נתמך בפיירפוקס, כרום, אופרה, ספארי‬ ‫ואינטרנט אקספלורר 01.‬ ‫• דפדפנים שלא תומכים ב- ‪Application‬‬ ‫‪ cache‬פשוט מתעלמים ממנו.‬
  14. 14. ‫מה ‪ AppCache‬מאפשר לנו?‬ ‫חיסכון ברוחב פס ומשאבי שרת.‬ ‫•‬ ‫חווית משתמש טובה יותר.‬ ‫•‬ ‫מתן אפשרות לגולש לעבוד ללא חיבור‬ ‫•‬ ‫לאינטרנט.‬‫אפשרות להגדיר דפים שיש צורך בחיבור‬ ‫•‬ ‫אינטרנט עבורם.‬ ‫אפשרות להגדרת ‪fallbacks‬‬ ‫•‬
  15. 15. ‫הגדרת ה-‪ MIME‬של ‪App Cache‬‬‫• כל קובץ עם סיומת ‪ appcache‬צריך להיות‬ ‫מוגש עם ‪ MIME type‬ששמו הוא:‬ ‫‪text/cache-manifest‬‬ ‫• יש צורך בשינוי ההגדרות בשרת שנעשות‬ ‫בהתאם למערכת ההפעלה של השרת.‬
  16. 16. LinuxApache-‫ ב‬Mime-‫הגדרת ה‬ mod_rewrite ‫ שיש בהם‬Apache ‫בשרתי‬ • :‫הוספת השורה‬ AddType text/cache-manifest appcache .‫ של האפליקציה‬root-‫ שנמצא ב‬htaccess-‫אל קובץ ה‬ mod_rewrite ‫ שאין בהם‬Apache ‫בשרתי‬ • :‫הוספת השורה‬ text/cache-manifest appcache; :‫אל‬ /user/local/etc/httpd/conf/mime.types :‫ מוסיפים את השורה אל‬nginx ‫בשרתי‬ • /etc/nginx/mime.types
  17. 17. IIS7-‫ ב‬MIME type-‫הגדרת ה‬ :IIS Manager-‫ ב‬MIME type ‫• איתור‬
  18. 18. ‫ –ב‬IIS7-‫ ב‬MIME type ‫הגדרת‬
  19. 19. cURL ‫ עם‬MIME Type ‫בדיקת‬
  20. 20. HTML-‫ לדף ה‬appcache ‫קישור בין‬<!DOCTYPE html><html lang="en" manifest="/my.appcache"> // your html document</html>
  21. 21. ‫שלושת חלקי ה-‪appcache‬‬ ‫• ‪:CACHE‬‬‫הדפים שאנו מורים לדפדפן לטעון לתוך ה-‬ ‫‪.cache‬‬ ‫• ‪:FALLBACK‬‬‫דפים שאנו מורים לדפדפן להגיש למשתמש‬ ‫במידה והוא מנסה לגשת למשאבים לא‬ ‫קיימים כאשר הוא מנותק מהאינטרנט.‬ ‫• ‪:NETWORK‬‬ ‫דפים שאנו מורים לדפדפן לא לשמור ב-‬ ‫‪ cache‬לעולם.‬
  22. 22. CACHE MANIFEST appcache ‫קובץ‬# cache version 1.2# This is a commentCACHE:/css/some.css/css/some_offline.css/js/some_screen.js/img/logo.pnghttp://example.com/css/styles.cssFALLBACK:/ /offline.htmlNETWORK:login.phpupdate.php
  23. 23. ‫יש דפדפנים שמבקשים אישור‬ ‫מהמשתמש על ‪appcache‬‬
  24. 24. ‫דיבוג של ‪appcache‬‬ ‫בכרום‬
  25. 25. ‫‪WEB SQL‬‬ ‫• התבסס על ‪SQLite‬‬ ‫• נתמך על ידי ספארי וכרום.‬‫• ‪ W3C‬הודיעה רשמית על עצירת גיבוש‬ ‫התקן.‬
  26. 26. ‫‪IndexedDB‬‬ ‫מסתמן כפתרון המועדף להצבת מסדי‬ ‫•‬ ‫נתונים בצד הלקוח‬ ‫נתמך כרגע ב-‪ FireFox, Chrome‬ו-01‪.IE‬‬ ‫•‬ ‫סביר להניח שבעתיד ייתמך באופרה‬ ‫ובספארי.‬ ‫‪Very low level API‬‬ ‫•‬ ‫מסד נתונים מונחה עצמים (שונה ממסד‬ ‫•‬‫הנתונים הרלוציוני המוכר לרוב המפתחים).‬ ‫התקן והאימפלמנטציה מאד לא מגובשים.‬ ‫•‬
  27. 27. ‫יצירת מסד נתונים‬ ‫בדיקת דפדפן ומימוש‬var indexedDB = window.indexedDB ||window.webkitIndexedDB || window.mozIndexedDB;if (webkitIndexedDB in window) { window.IDBTransaction =window.webkitIDBTransaction; window.IDBKeyRange =window.webkitIDBKeyRange;}
  28. 28. ‫יצירה והתחברות למסד נתונים‬ :‫התחברות‬var request = indexedDB.open(MyTestDatabase); :callback ‫יצירת‬request.onsuccess = function(event){} :‫יצירת אובייקט מידע‬var db = event.target.result; var request = db.setVersion(1.2); request.onsuccess = function(event){ console.log("Success version."); if(!db.objectStoreNames.contains(family)){ console.log("Creating objectStore"); db.createObjectStore(family); }
  29. 29. ‫יצירת טרנזקציה ראשונית‬var transaction = db.transaction([], IDBTransaction.READ_WRITE,2000); transaction.oncomplete = function(){ console.log("Successtransaction"); };
  30. 30. ‫הכנסת מידע‬var objectStore =transaction.objectStore(family);objectStore.put(something).onsuccess =function(event) { console.log("Saved record with id " +event.result); }
  31. 31. ‫דוגמאות חיות‬‫• דוגמאות וסקריפטים רלוונטיים יפורסמו‬ ‫באתר אינטרנט ישראל:‬ ‫‪www.internet-israel.com‬‬ ‫תודה רבה!‬

×