Your SlideShare is downloading. ×
אחסון מידע - ל-websql ו-indexdb רן בר-זיק
אחסון מידע - ל-websql ו-indexdb רן בר-זיק
אחסון מידע - ל-websql ו-indexdb רן בר-זיק
אחסון מידע - ל-websql ו-indexdb רן בר-זיק
אחסון מידע - ל-websql ו-indexdb רן בר-זיק
אחסון מידע - ל-websql ו-indexdb רן בר-זיק
אחסון מידע - ל-websql ו-indexdb רן בר-זיק
אחסון מידע - ל-websql ו-indexdb רן בר-זיק
אחסון מידע - ל-websql ו-indexdb רן בר-זיק
אחסון מידע - ל-websql ו-indexdb רן בר-זיק
אחסון מידע - ל-websql ו-indexdb רן בר-זיק
אחסון מידע - ל-websql ו-indexdb רן בר-זיק
אחסון מידע - ל-websql ו-indexdb רן בר-זיק
אחסון מידע - ל-websql ו-indexdb רן בר-זיק
אחסון מידע - ל-websql ו-indexdb רן בר-זיק
אחסון מידע - ל-websql ו-indexdb רן בר-זיק
אחסון מידע - ל-websql ו-indexdb רן בר-זיק
אחסון מידע - ל-websql ו-indexdb רן בר-זיק
אחסון מידע - ל-websql ו-indexdb רן בר-זיק
אחסון מידע - ל-websql ו-indexdb רן בר-זיק
אחסון מידע - ל-websql ו-indexdb רן בר-זיק
אחסון מידע - ל-websql ו-indexdb רן בר-זיק
אחסון מידע - ל-websql ו-indexdb רן בר-זיק
אחסון מידע - ל-websql ו-indexdb רן בר-זיק
אחסון מידע - ל-websql ו-indexdb רן בר-זיק
אחסון מידע - ל-websql ו-indexdb רן בר-זיק
אחסון מידע - ל-websql ו-indexdb רן בר-זיק
אחסון מידע - ל-websql ו-indexdb רן בר-זיק
אחסון מידע - ל-websql ו-indexdb רן בר-זיק
אחסון מידע - ל-websql ו-indexdb רן בר-זיק
אחסון מידע - ל-websql ו-indexdb רן בר-זיק
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

2,031

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,031
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. ‫אחסון מידע ב-5‪HTML‬‬ ‫רן בר-זיק‬‫מפתח ‪ 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 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. ‫יש דפדפנים שמבקשים אישור‬ ‫מהמשתמש על ‪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("Successtransaction"); };
  • 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‬‬ ‫תודה רבה!‬

×