אחסון מידע - ל-websql ו-indexdb רן בר-זיק
DESCRIPTION
TRANSCRIPT
HTML5-אחסון מידע ב
זיק-רן בר HP Softwareבחברת PHPמפתח
אתר אינטרנט ישראל
www.internet-israel.com
שיטות קיימות לאיחסון מידע
עוגיות מבוססות דפדפן• JavaScriptניהול המידע נעשה באמצעות
document.cookie
עוגיות מבוססות פלאש• JavaScriptניהול המידע נעשה באמצעות
המתממשק לפלאש
חסרונות העוגיות
:JavaScriptבעוגיה מבוססת
.מקום מוגבל לארבעה קילובייט1.
.קושי בניהול הנתונים2.
:בעוגיה מבוססת פלאש
לא ניתן להסתמך על כך שיהיה פלאש . 1 .בכל מכשיר
localStorage
key=>valueאחסון בפורמט •
•API נוח ופשוט
Mb 5אחסון של עד •
מימוש זהה בכל הדפדפנים•
8נתמך באינטרנט אקספלורר •
localStorage – API
:אחסון נתונים
localStorage.setItem('KEY', 'VALUE');
:שליפת נתון
var value = localStorage.getItem('KEY');
:מחיקת נתון
localStorage.clear('KEY');
:מחיקת כל הנתונים
localStorage.clear();
localStorage – Chrome Debugging
localStorage – FireFox Debugging
SessionStorage
key=>valueאחסון בפורמט •
•API נוח ופשוט
Mb 5אחסון של עד •
מימוש זהה בכל הדפדפנים•
8נתמך באינטרנט אקספלורר •
לא נחשב כעוגיה –מבחינה חוקית •
sessionStorage – API
:אחסון נתונים
sessionStorage.setItem('KEY', 'VALUE');
:שליפת נתון
var value = sessionStorage.getItem('KEY');
:מחיקת נתון
sessionStorage.clear('KEY');
:מחיקת כל הנתונים
sessionStorage.clear();
sessionStorage - chrome Debugging
sessionStorage - FireFox debugging
Session vs Local
localSorage-הנתונים המאוחסנים ב• .נשמרים גם לאחר סגירת החלון
.הנתונים הם חד חד ערכיים לכל דומיין
sessionStorage-הנתונים המאוחסנים ב• .נשמרים רק לאורך חיי החלון
.הנתונים הם חד חד ערכיים לכל חלון
Application Cache
ספארי , אופרה, כרום, נתמך בפיירפוקס• .10ואינטרנט אקספלורר
Application-דפדפנים שלא תומכים ב•cache פשוט מתעלמים ממנו.
?מאפשר לנו AppCacheמה
.חיסכון ברוחב פס ומשאבי שרת•
.חווית משתמש טובה יותר•
מתן אפשרות לגולש לעבוד ללא חיבור • .לאינטרנט
אפשרות להגדיר דפים שיש צורך בחיבור • .אינטרנט עבורם
fallbacksאפשרות להגדרת •
App Cacheשל MIME-הגדרת ה
צריך להיות appcacheכל קובץ עם סיומת •: ששמו הוא MIME typeמוגש עם
text/cache-manifest
יש צורך בשינוי ההגדרות בשרת שנעשות • .בהתאם למערכת ההפעלה של השרת
Linux\Apache-ב 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
7IIS-ב MIME type-הגדרת ה
:IIS Manager-ב MIME typeאיתור •
'ב– 7IIS-ב MIME typeהגדרת
cURLעם MIME Typeבדיקת
HTML-לדף ה appcacheקישור בין
<!DOCTYPE html> <html lang="en" manifest="/my.appcache"> // your html document </html>
appcache-שלושת חלקי ה
•CACHE: -הדפים שאנו מורים לדפדפן לטעון לתוך ה
cache.
•FALLBACK: דפים שאנו מורים לדפדפן להגיש למשתמש
במידה והוא מנסה לגשת למשאבים לא .קיימים כאשר הוא מנותק מהאינטרנט
•NETWORK: -דפים שאנו מורים לדפדפן לא לשמור ב
cache לעולם.
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
יש דפדפנים שמבקשים אישור appcacheמהמשתמש על
appcacheדיבוג של בכרום
WEB SQL
SQLiteהתבסס על •
.נתמך על ידי ספארי וכרום•
•W3C הודיעה רשמית על עצירת גיבוש .התקן
IndexedDB
מסתמן כפתרון המועדף להצבת מסדי • נתונים בצד הלקוח
. IE10-ו FireFox, Chrome-נתמך כרגע ב•סביר להניח שבעתיד ייתמך באופרה
.ובספארי
•Very low level API
שונה ממסד )מסד נתונים מונחה עצמים • (.הנתונים הרלוציוני המוכר לרוב המפתחים
.התקן והאימפלמנטציה מאד לא מגובשים•
יצירת מסד נתונים בדיקת דפדפן ומימוש
var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;
if ('webkitIndexedDB' in window) {
window.IDBTransaction = window.webkitIDBTransaction;
window.IDBKeyRange = window.webkitIDBKeyRange;
}
יצירה והתחברות למסד נתונים
:התחברות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'); }
יצירת טרנזקציה ראשונית
var transaction = db.transaction([], IDBTransaction.READ_WRITE, 2000);
transaction.oncomplete = function(){
console.log("Success transaction");
};
הכנסת מידע
var objectStore = transaction.objectStore('family');
objectStore.put('something').onsuccess = function(event) {
console.log("Saved record with id " + event.result);
}
דוגמאות חיות
דוגמאות וסקריפטים רלוונטיים יפורסמו • :באתר אינטרנט ישראל
www.internet-israel.com
!תודה רבה