html5 n.
Download
Skip this Video
Download Presentation
אחסון מידע ב- HTML5

Loading in 2 Seconds...

play fullscreen
1 / 31

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


  • 167 Views
  • Uploaded on

אחסון מידע ב- HTML5. רן בר-זיק מפתח PHP בחברת HP Software אתר אינטרנט ישראל www.internet-israel.com. שיטות קיימות לאיחסון מידע. עוגיות מבוססות דפדפן ניהול המידע נעשה באמצעות JavaScript document.cookie עוגיות מבוססות פלאש ניהול המידע נעשה באמצעות JavaScript המתממשק לפלאש. חסרונות העוגיות.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'אחסון מידע ב- HTML5' - donal


Download Now An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
html5

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

רן בר-זיקמפתח PHP בחברת HP Softwareאתר אינטרנט ישראלwww.internet-israel.com

slide2
שיטות קיימות לאיחסון מידע
  • עוגיות מבוססות דפדפןניהול המידע נעשה באמצעות JavaScriptdocument.cookie
  • עוגיות מבוססות פלאשניהול המידע נעשה באמצעות JavaScript המתממשק לפלאש
slide3
חסרונות העוגיות

בעוגיה מבוססת JavaScript:

  • מקום מוגבל לארבעה קילובייט.
  • קושי בניהול הנתונים.

בעוגיה מבוססת פלאש:

1. לא ניתן להסתמך על כך שיהיה פלאש בכל מכשיר.

localstorage
localStorage
  • אחסון בפורמט key=>value
  • API נוח ופשוט
  • אחסון של עד 5 Mb
  • מימוש זהה בכל הדפדפנים
  • נתמך באינטרנט אקספלורר 8
localstorage api
localStorage – API

אחסון נתונים:

localStorage.setItem('KEY', 'VALUE');

שליפת נתון:

varvalue = localStorage.getItem('KEY');

מחיקת נתון:

localStorage.clear('KEY');

מחיקת כל הנתונים:

localStorage.clear();

sessionstorage
SessionStorage
  • אחסון בפורמט key=>value
  • API נוח ופשוט
  • אחסון של עד 5 Mb
  • מימוש זהה בכל הדפדפנים
  • נתמך באינטרנט אקספלורר 8
  • מבחינה חוקית – לא נחשב כעוגיה
sessionstorage api
sessionStorage – API

אחסון נתונים:

sessionStorage.setItem('KEY', 'VALUE');

שליפת נתון:

varvalue = sessionStorage.getItem('KEY');

מחיקת נתון:

sessionStorage.clear('KEY');

מחיקת כל הנתונים:

sessionStorage.clear();

session vs local
Session vs Local
  • הנתונים המאוחסנים ב-localSorage נשמרים גם לאחר סגירת החלון.הנתונים הם חד חד ערכיים לכל דומיין.
  • הנתונים המאוחסנים ב-sessionStorage נשמרים רק לאורך חיי החלון.הנתונים הם חד חד ערכיים לכל חלון.
application cache
Application Cache
  • נתמך בפיירפוקס, כרום, אופרה, ספארי ואינטרנט אקספלורר 10.
  • דפדפנים שלא תומכים ב-Application cache פשוט מתעלמים ממנו.
appcache
מה AppCache מאפשר לנו?
  • חיסכון ברוחב פס ומשאבי שרת.
  • חווית משתמש טובה יותר.
  • מתן אפשרות לגולש לעבוד ללא חיבור לאינטרנט.
  • אפשרות להגדיר דפים שיש צורך בחיבור אינטרנט עבורם.
  • אפשרות להגדרת fallbacks
mime app cache
הגדרת ה-MIME של App Cache
  • כל קובץ עם סיומת appcache צריך להיות מוגש עם MIME type ששמו הוא: text/cache-manifest
  • יש צורך בשינוי ההגדרות בשרת שנעשות בהתאם למערכת ההפעלה של השרת.
mime linux apache
הגדרת ה-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 7 iis
הגדרת ה-MIME type ב-7IIS
  • איתור MIME type ב-IIS Manager:
appcache html
קישור בין appcache לדף ה-HTML

<!DOCTYPE html>

<html lang="en" manifest="/my.appcache">

// your html document

</html>

appcache1
שלושת חלקי ה-appcache
  • CACHE:הדפים שאנו מורים לדפדפן לטעון לתוך ה-cache.
  • FALLBACK:דפים שאנו מורים לדפדפן להגיש למשתמש במידה והוא מנסה לגשת למשאבים לא קיימים כאשר הוא מנותק מהאינטרנט.
  • NETWORK:דפים שאנו מורים לדפדפן לא לשמור ב-cache לעולם.
appcache2
קובץ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.png

http://example.com/css/styles.css

FALLBACK:

/ /offline.html

NETWORK:

login.php

update.php

web sql
WEB SQL
  • התבסס על SQLite
  • נתמך על ידי ספארי וכרום.
  • W3C הודיעה רשמית על עצירת גיבוש התקן.
indexeddb
IndexedDB
  • מסתמן כפתרון המועדף להצבת מסדי נתונים בצד הלקוח
  • נתמך כרגע ב-FireFox, Chrome ו-IE10. סביר להניח שבעתיד ייתמך באופרה ובספארי.
  • Very low level API
  • מסד נתונים מונחה עצמים (שונה ממסד הנתונים הרלוציוני המוכר לרוב המפתחים).
  • התקן והאימפלמנטציה מאד לא מגובשים.
slide27
יצירת מסד נתוניםבדיקת דפדפן ומימוש

varindexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;

if ('webkitIndexedDB' in window) {

window.IDBTransaction = window.webkitIDBTransaction;

window.IDBKeyRange = window.webkitIDBKeyRange;

}

slide28
יצירה והתחברות למסד נתונים

התחברות:

var request = indexedDB.open('MyTestDatabase');

יצירת callback:

request.onsuccess = function(event){}

יצירת אובייקט מידע:

vardb = 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');

}

slide29
יצירת טרנזקציה ראשונית

var transaction = db.transaction([], IDBTransaction.READ_WRITE, 2000);

transaction.oncomplete = function(){

console.log("Success transaction");

};

slide30
הכנסת מידע

varobjectStore = transaction.objectStore('family');

objectStore.put('something').onsuccess = function(event) {

console.log("Saved record with id " + event.result);

}

slide31
דוגמאות חיות
  • דוגמאות וסקריפטים רלוונטיים יפורסמו באתר אינטרנט ישראל:www.internet-israel.com

תודה רבה!