אחסון מידע ב- HTML5

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