אחסון מידע - ל-websql ו-indexdb רן בר-זיק
0 likes•1,102 views
![יצירת טרנזקציה ראשונית
var transaction = db.transaction([],
IDBTransaction.READ_WRITE,
2000);
transaction.oncomplete = function(){
console.log("Success
transaction");
};](https://image.slidesharecdn.com/random-111109065402-phpapp02/85/websql-indexdb-29-320.jpg)
אחסון מידע - ל-websql ו-indexdb רן בר-זיק
- 1. אחסון מידע ב-5HTML רן בר-זיק מפתח PHPבחברת HP Software אתר אינטרנט ישראל www.internet-israel.com
- 2. שיטות קיימות לאיחסון מידע • עוגיות מבוססות דפדפן ניהול המידע נעשה באמצעות JavaScript document.cookie • עוגיות מבוססות פלאש ניהול המידע נעשה באמצעות JavaScript המתממשק לפלאש
- 3. חסרונות העוגיות בעוגיה מבוססת :JavaScript 1. מקום מוגבל לארבעה קילובייט. 2. קושי בניהול הנתונים. בעוגיה מבוססת פלאש: 1. לא ניתן להסתמך על כך שיהיה פלאש בכל מכשיר.
- 4. localStorage אחסון בפורמט key=>value • APIנוח ופשוט • אחסון של עד 5 Mb • מימוש זהה בכל הדפדפנים • נתמך באינטרנט אקספלורר 8 •
- 5. localStorage – API :אחסון נתונים localStorage.setItem('KEY', 'VALUE'); :שליפת נתון var value = 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'); :שליפת נתון var value = 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 • נתמך בפיירפוקס, כרום, אופרה, ספארי ואינטרנט אקספלורר 01. • דפדפנים שלא תומכים ב- Application cacheפשוט מתעלמים ממנו.
- 14. מה AppCacheמאפשר לנו? חיסכון ברוחב פס ומשאבי שרת. • חווית משתמש טובה יותר. • מתן אפשרות לגולש לעבוד ללא חיבור • לאינטרנט. אפשרות להגדיר דפים שיש צורך בחיבור • אינטרנט עבורם. אפשרות להגדרת fallbacks •
- 15. הגדרת ה- MIMEשל App Cache • כל קובץ עם סיומת appcacheצריך להיות מוגש עם MIME typeששמו הוא: text/cache-manifest • יש צורך בשינוי ההגדרות בשרת שנעשות בהתאם למערכת ההפעלה של השרת.
- 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. IIS7- בMIME type-הגדרת ה :IIS Manager- בMIME type • איתור
- 18. ' –בIIS7- בMIME type הגדרת
- 19. cURL עםMIME Type בדיקת
- 20. HTML- לדף הappcache קישור בין <!DOCTYPE html> <html lang="en" manifest="/my.appcache"> // your html document </html>
- 21. שלושת חלקי ה-appcache • :CACHE הדפים שאנו מורים לדפדפן לטעון לתוך ה- .cache • :FALLBACK דפים שאנו מורים לדפדפן להגיש למשתמש במידה והוא מנסה לגשת למשאבים לא קיימים כאשר הוא מנותק מהאינטרנט. • :NETWORK דפים שאנו מורים לדפדפן לא לשמור ב- cacheלעולם.
- 22. CACHE MANIFEST appcache קובץ # 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ו-01.IE • סביר להניח שבעתיד ייתמך באופרה ובספארי. Very low level API • מסד נתונים מונחה עצמים (שונה ממסד • הנתונים הרלוציוני המוכר לרוב המפתחים). התקן והאימפלמנטציה מאד לא מגובשים. •
- 27. יצירת מסד נתונים בדיקת דפדפן ומימוש var indexedDB = 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){} :יצירת אובייקט מידע 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. יצירת טרנזקציה ראשונית var transaction = db.transaction([], IDBTransaction.READ_WRITE, 2000); transaction.oncomplete = function(){ console.log("Success transaction"); };
- 30. הכנסת מידע var objectStore = transaction.objectStore('family'); objectStore.put('something').onsuccess = function(event) { console.log("Saved record with id " + event.result); }
- 31. דוגמאות חיות • דוגמאות וסקריפטים רלוונטיים יפורסמו באתר אינטרנט ישראל: www.internet-israel.com תודה רבה!