1 / 31

אחסון מידע ב- HTML5

אחסון מידע ב- HTML5. רן בר-זיק מפתח PHP בחברת HP Software אתר אינטרנט ישראל www.internet-israel.com. שיטות קיימות לאיחסון מידע. עוגיות מבוססות דפדפן ניהול המידע נעשה באמצעות JavaScript document.cookie עוגיות מבוססות פלאש ניהול המידע נעשה באמצעות JavaScript המתממשק לפלאש. חסרונות העוגיות.

donal
Download Presentation

אחסון מידע ב- HTML5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. אחסון מידע ב-HTML5 רן בר-זיקמפתח PHP בחברת HP Softwareאתר אינטרנט ישראלwww.internet-israel.com

  2. שיטות קיימות לאיחסון מידע • עוגיות מבוססות דפדפןניהול המידע נעשה באמצעות JavaScriptdocument.cookie • עוגיות מבוססות פלאשניהול המידע נעשה באמצעות JavaScript המתממשק לפלאש

  3. חסרונות העוגיות בעוגיה מבוססת JavaScript: • מקום מוגבל לארבעה קילובייט. • קושי בניהול הנתונים. בעוגיה מבוססת פלאש: 1. לא ניתן להסתמך על כך שיהיה פלאש בכל מכשיר.

  4. localStorage • אחסון בפורמט key=>value • API נוח ופשוט • אחסון של עד 5 Mb • מימוש זהה בכל הדפדפנים • נתמך באינטרנט אקספלורר 8

  5. localStorage – API אחסון נתונים: localStorage.setItem('KEY', 'VALUE'); שליפת נתון: varvalue = localStorage.getItem('KEY'); מחיקת נתון: localStorage.clear('KEY'); מחיקת כל הנתונים: localStorage.clear();

  6. localStorage – Chrome Debugging

  7. localStorage – FireFox Debugging

  8. SessionStorage • אחסון בפורמט key=>value • API נוח ופשוט • אחסון של עד 5 Mb • מימוש זהה בכל הדפדפנים • נתמך באינטרנט אקספלורר 8 • מבחינה חוקית – לא נחשב כעוגיה

  9. sessionStorage – API אחסון נתונים: sessionStorage.setItem('KEY', 'VALUE'); שליפת נתון: varvalue = sessionStorage.getItem('KEY'); מחיקת נתון: sessionStorage.clear('KEY'); מחיקת כל הנתונים: sessionStorage.clear();

  10. sessionStorage - chrome Debugging

  11. sessionStorage - FireFox debugging

  12. Session vs Local • הנתונים המאוחסנים ב-localSorage נשמרים גם לאחר סגירת החלון.הנתונים הם חד חד ערכיים לכל דומיין. • הנתונים המאוחסנים ב-sessionStorage נשמרים רק לאורך חיי החלון.הנתונים הם חד חד ערכיים לכל חלון.

  13. Application Cache • נתמך בפיירפוקס, כרום, אופרה, ספארי ואינטרנט אקספלורר 10. • דפדפנים שלא תומכים ב-Application cache פשוט מתעלמים ממנו.

  14. מה AppCache מאפשר לנו? • חיסכון ברוחב פס ומשאבי שרת. • חווית משתמש טובה יותר. • מתן אפשרות לגולש לעבוד ללא חיבור לאינטרנט. • אפשרות להגדיר דפים שיש צורך בחיבור אינטרנט עבורם. • אפשרות להגדרת fallbacks

  15. הגדרת ה-MIME של App Cache • כל קובץ עם סיומת appcache צריך להיות מוגש עם MIME type ששמו הוא: text/cache-manifest • יש צורך בשינוי ההגדרות בשרת שנעשות בהתאם למערכת ההפעלה של השרת.

  16. הגדרת ה-Mime ב-Linux\Apache • בשרתי Apache שיש בהם mod_rewriteהוספת השורה:AddType text/cache-manifest appcacheאל קובץ ה-htaccess שנמצא ב-root של האפליקציה. • בשרתי Apache שאין בהם mod_rewriteהוספת השורה:text/cache-manifest      appcache;אל: /user/local/etc/httpd/conf/mime.types • בשרתי nginx מוסיפים את השורה אל:/etc/nginx/mime.types

  17. הגדרת ה-MIME type ב-7IIS • איתור MIME type ב-IIS Manager:

  18. הגדרת MIME type ב-7IIS–ב'

  19. בדיקת MIME Type עם cURL

  20. קישור בין appcache לדף ה-HTML <!DOCTYPE html> <html lang="en" manifest="/my.appcache"> // your html document </html>

  21. שלושת חלקי ה-appcache • CACHE:הדפים שאנו מורים לדפדפן לטעון לתוך ה-cache. • FALLBACK:דפים שאנו מורים לדפדפן להגיש למשתמש במידה והוא מנסה לגשת למשאבים לא קיימים כאשר הוא מנותק מהאינטרנט. • NETWORK:דפים שאנו מורים לדפדפן לא לשמור ב-cache לעולם.

  22. קובץappcache CACHE MANIFEST # cache version 1.2 # This is a comment CACHE: /css/some.css /css/some_offline.css /js/some_screen.js /img/logo.png http://example.com/css/styles.css FALLBACK: / /offline.html NETWORK: login.php update.php

  23. יש דפדפנים שמבקשים אישור מהמשתמש על appcache

  24. דיבוג של appcacheבכרום

  25. WEB SQL • התבסס על SQLite • נתמך על ידי ספארי וכרום. • W3C הודיעה רשמית על עצירת גיבוש התקן.

  26. IndexedDB • מסתמן כפתרון המועדף להצבת מסדי נתונים בצד הלקוח • נתמך כרגע ב-FireFox, Chrome ו-IE10. סביר להניח שבעתיד ייתמך באופרה ובספארי. • Very low level API • מסד נתונים מונחה עצמים (שונה ממסד הנתונים הרלוציוני המוכר לרוב המפתחים). • התקן והאימפלמנטציה מאד לא מגובשים.

  27. יצירת מסד נתוניםבדיקת דפדפן ומימוש varindexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB; if ('webkitIndexedDB' in window) { window.IDBTransaction = window.webkitIDBTransaction; window.IDBKeyRange = window.webkitIDBKeyRange; }

  28. יצירה והתחברות למסד נתונים התחברות: var request = indexedDB.open('MyTestDatabase'); יצירת callback: request.onsuccess = function(event){} יצירת אובייקט מידע: vardb = 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. יצירת טרנזקציה ראשונית var transaction = db.transaction([], IDBTransaction.READ_WRITE, 2000); transaction.oncomplete = function(){ console.log("Success transaction"); };

  30. הכנסת מידע varobjectStore = transaction.objectStore('family'); objectStore.put('something').onsuccess = function(event) { console.log("Saved record with id " + event.result); }

  31. דוגמאות חיות • דוגמאות וסקריפטים רלוונטיים יפורסמו באתר אינטרנט ישראל:www.internet-israel.com תודה רבה!

More Related