View
244
Download
12
Embed Size (px)
Citation preview
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שנעשות • בשרת ההגדרות בשינוי צורך יש
. השרת של ההפעלה למערכת בהתאם
- ה -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
- ה -MIME typeהגדרת 7IISב
-MIME typeאיתור • :IIS Managerב
-MIME typeהגדרת '7IISב ב –
cURLעם MIME Typeבדיקת
בין -appcacheקישור ה HTMLלדף
<!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.pnghttp://example.com/css/styles.css
FALLBACK:/ /offline.html
NETWORK:login.phpupdate.php
מהמשתמש אישור שמבקשים דפדפנים ישappcacheעל
של appcacheדיבוגבכרום
WEB SQL
על • SQLiteהתבסס•. וכרום ספארי ידי על נתמך•W3C. התקן גיבוש עצירת על רשמית הודיעה
IndexedDB
נתונים • מסדי להצבת המועדף כפתרון מסתמןהלקוח בצד
•- ב כרגע -FireFox, Chromeנתמך . IE10ו . ובספארי באופרה ייתמך שבעתיד להניח סביר
•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
! רבה תודה