View
70
Download
0
Category
Preview:
DESCRIPTION
אחסון מידע ב- HTML5. רן בר-זיק מפתח PHP בחברת HP Software אתר אינטרנט ישראל www.internet-israel.com. שיטות קיימות לאיחסון מידע. עוגיות מבוססות דפדפן ניהול המידע נעשה באמצעות JavaScript document.cookie עוגיות מבוססות פלאש ניהול המידע נעשה באמצעות JavaScript המתממשק לפלאש. חסרונות העוגיות. - PowerPoint PPT Presentation
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
! רבה תודה
Recommended