אחסון מידע - ל-websql ו-indexdb רן בר-זיק

‫אחסון מידע ב-5‪HTML‬‬

‫רן בר-זיק‬
‫מפתח ‪ PHP‬בחברת ‪HP Software‬‬

‫אתר אינטרנט ישראל‬
‫‪www.internet-israel.com‬‬

‫שיטות קיימות לאיחסון מידע‬
‫• עוגיות מבוססות דפדפן‬
‫ניהול המידע נעשה באמצעות ‪JavaScript‬‬
‫‪document.cookie‬‬
‫• עוגיות מבוססות פלאש‬
‫ניהול המידע נעשה באמצעות ‪JavaScript‬‬
‫המתממשק לפלאש‬

‫חסרונות העוגיות‬
‫בעוגיה מבוססת ‪:JavaScript‬‬
‫1. מקום מוגבל לארבעה קילובייט.‬
‫2. קושי בניהול הנתונים.‬

‫בעוגיה מבוססת פלאש:‬
‫1. לא ניתן להסתמך על כך שיהיה פלאש‬
‫בכל מכשיר.‬

‫‪localStorage‬‬

‫אחסון בפורמט ‪key=>value‬‬ ‫•‬
‫‪ API‬נוח ופשוט‬ ‫•‬
‫אחסון של עד 5 ‪Mb‬‬ ‫•‬
‫מימוש זהה בכל הדפדפנים‬ ‫•‬
‫נתמך באינטרנט אקספלורר 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‬נוח ופשוט‬ ‫•‬
‫אחסון של עד 5 ‪Mb‬‬ ‫•‬
‫מימוש זהה בכל הדפדפנים‬ ‫•‬
‫נתמך באינטרנט אקספלורר 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‬‬
‫• נתמך בפיירפוקס, כרום, אופרה, ספארי‬
‫ואינטרנט אקספלורר 01.‬
‫• דפדפנים שלא תומכים ב- ‪Application‬‬
‫‪ cache‬פשוט מתעלמים ממנו.‬

‫מה ‪ AppCache‬מאפשר לנו?‬
‫חיסכון ברוחב פס ומשאבי שרת.‬ ‫•‬
‫חווית משתמש טובה יותר.‬ ‫•‬
‫מתן אפשרות לגולש לעבוד ללא חיבור‬ ‫•‬
‫לאינטרנט.‬
‫אפשרות להגדיר דפים שיש צורך בחיבור‬ ‫•‬
‫אינטרנט עבורם.‬
‫אפשרות להגדרת ‪fallbacks‬‬ ‫•‬

‫הגדרת ה-‪ MIME‬של ‪App Cache‬‬
‫• כל קובץ עם סיומת ‪ appcache‬צריך להיות‬
‫מוגש עם ‪ MIME type‬ששמו הוא:‬
‫‪text/cache-manifest‬‬
‫• יש צורך בשינוי ההגדרות בשרת שנעשות‬
‫בהתאם למערכת ההפעלה של השרת.‬

LinuxApache-‫ ב‬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

IIS7-‫ ב‬MIME type-‫הגדרת ה‬
:IIS Manager-‫ ב‬MIME type ‫• איתור‬

'‫ –ב‬IIS7-‫ ב‬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‬לעולם.‬

CACHE MANIFEST
appcache ‫קובץ‬
# 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‬‬
‫מסתמן כפתרון המועדף להצבת מסדי‬ ‫•‬
‫נתונים בצד הלקוח‬
‫נתמך כרגע ב-‪ FireFox, Chrome‬ו-01‪.IE‬‬ ‫•‬
‫סביר להניח שבעתיד ייתמך באופרה‬
‫ובספארי.‬
‫‪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‬‬

‫תודה רבה!‬

אחסון מידע - ל-websql ו-indexdb רן בר-זיק

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (14)

Similar a אחסון מידע - ל-websql ו-indexdb רן בר-זיק

Similar a אחסון מידע - ל-websql ו-indexdb רן בר-זיק (20)

Más de Israeli Internet Association technology committee

Más de Israeli Internet Association technology committee (20)

אחסון מידע - ל-websql ו-indexdb רן בר-זיק