Html5
This presentation is the property of its rightful owner.
Sponsored Links
1 / 31

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


  • 89 Views
  • Uploaded on
  • Presentation posted in: General

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

Download Presentation

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

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


Html5

שיטות קיימות לאיחסון מידע

  • עוגיות מבוססות דפדפןניהול המידע נעשה באמצעות JavaScriptdocument.cookie

  • עוגיות מבוססות פלאשניהול המידע נעשה באמצעות JavaScript המתממשק לפלאש


Html5

חסרונות העוגיות

בעוגיה מבוססת 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();


Localstorage chrome debugging

localStorage – Chrome Debugging


Localstorage firefox debugging

localStorage – FireFox Debugging


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();


Sessionstorage chrome debugging

sessionStorage - chrome Debugging


Sessionstorage firefox debugging

sessionStorage - FireFox debugging


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:


Mime type 7 iis1

הגדרת MIME type ב-7IIS–ב'


Mime type curl

בדיקת MIME Type עם cURL


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


Appcache3

יש דפדפנים שמבקשים אישור מהמשתמש על appcache


Appcache4

דיבוג של appcacheבכרום


Web sql

WEB SQL

  • התבסס על SQLite

  • נתמך על ידי ספארי וכרום.

  • W3C הודיעה רשמית על עצירת גיבוש התקן.


Indexeddb

IndexedDB

  • מסתמן כפתרון המועדף להצבת מסדי נתונים בצד הלקוח

  • נתמך כרגע ב-FireFox, Chrome ו-IE10. סביר להניח שבעתיד ייתמך באופרה ובספארי.

  • Very low level API

  • מסד נתונים מונחה עצמים (שונה ממסד הנתונים הרלוציוני המוכר לרוב המפתחים).

  • התקן והאימפלמנטציה מאד לא מגובשים.


Html5

יצירת מסד נתוניםבדיקת דפדפן ומימוש

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

if ('webkitIndexedDB' in window) {

window.IDBTransaction = window.webkitIDBTransaction;

window.IDBKeyRange = window.webkitIDBKeyRange;

}


Html5

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

התחברות:

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

}


Html5

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

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

transaction.oncomplete = function(){

console.log("Success transaction");

};


Html5

הכנסת מידע

varobjectStore = transaction.objectStore('family');

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

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

}


Html5

דוגמאות חיות

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

    תודה רבה!


  • Login