אחסון מידע ב-HTML5 רן בר-זיק מפתח PHP בחברת HP Software אתר אינטרנט ישראל

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

! רבה תודה

Documents

אחסון מידע ב-HTML5 רן בר-זיק מפתח PHP בחברת HP Software אתר אינטרנט ישראל