HTML5 storage الجزء الاول


السلام عليكم و رحمه الله تعالى و بركاته

فى هذا الجزء أتناول الكائن sessionStorage لتخزين البيانات بين الصفحات ، و الكائن localStorage لتخزين البيانات بين الصفحات و حتى بعد اغلاق المتصفح ، و الكائن globalStorage الذى تم الغاءه من مواصفات HTML5 لكنه لازال متواجد فى FireFox2 .

مقدمه
الكائن sessionStorage
الكائن localStorage
الكائن globalStorage
الحدث storage
الدعم من المتصفحات
المزيد

مقدمه

تحتوى HTML5 على الكثير من الكائنات لتخزين البيانات فى المتصفح بدلا من ال cookies التى تقتصر مساحتها التخزينيه على 4Kb و غير امنه و استخراج البيانات منها يتطلب اعراب ال النص المخزن ، و ذلك لتوفير وسيله اكثر امانا و ضخمه لتخزين ازواج البيانات key/value pairs لإستخدامها لاحقا اما بين الصفحات بإستخدام sessionStorage او بين الصفحات و حتى بعد اغلاق المتصفخ و فتحه بإستخدام الكائن localStorage ، او تخزين البيانات فى قواعد بيانات SQLite كما سنرى الجزء فى الثانى ان شاء الله ، او تخزين ملفات التطبيق مثل js,css,html,jpg … الخ حتى يعمل التطبيق اوفلاين عند انقطاع الانترنت و سرعه بدأ التطبيق عندما يرجع اتصال النترنت لأن ملفات التطبيق كلها على جهاز المستخدم يخزنها المتصفح ، ملفات السيرفر فقط مثل php مخزنه على السيرفر كما سنرى فى الاجزاء اللاحقه ان شاء الله .

sessionStorage

الكائن sessionStorage يقوم بتخزين البيانات فى جلسه الصفحه page session التى تبدأ منذ بدايه فتح الصفحه و حتى اغلاق النافذه او ال tab ، و بهذا يمكنك تخزين و الوصول إلى البيانات بين الصفح المختلفه مادام فى نفس ال tab او النافذه و تحت نفس الدومين ، و يتم مسح هذه البيانات فور اغلاق ال tab او النافذه و لا يمكنك الوصول للبيانات عند فتح هذه الصفحه مره اخرى ، يمكن تخزين و الوصول للبيانات من sessionStorage عن طريق الوظيفتين setItem و getItem كما يوضح المثال البسيط التالى :

// set key/values in this page
sessionStorage.setItem("name", "Mostafa Farghaly");
sessionStorage.setItem("age", 22);
// get values in another page
alert(sessionStorage.getItem("name")); // Mostafa Farghaly
alert(sessionStorage.getItem("age")); //22

ملحوظه : قم بتجربه ال sessionStorage من ال localhost ، لأن التجربه من داخل مسار عادى سينتج عنه خطأ .

او مباشره بدون وظائف عن طريق كتابه اسم ال key كما يوضح الكود البسيط التالى :

sessionStorage.name = "Mostafa Farghaly";
alert(sessionStorage.name); // Mostafa Farghaly

يحتوى الكائن sessionStorage على الخاصيه length التى بها عدد القيم المخزنه فى ال sessionStorage للدومين الحالى :

alert(sessionStorage.length); //2

و يحتوى ايضا على الوظيفه key التى تقبل رقم و ترجع اسم ال key المرتبط به :

alert(sessionStorage.key(0)); //name
alert(sessionStorage.key(1)); //age

و يحتوى ايضا على الوظيفه removeItem التى تقبل key و تقوم بمحو ال key/value بأكمله و تقوم بتقليل ال length واحد 1 كما يلى :

sessionStorage.removeItem("name");
alert(sessionStorage.name); //null

و يحتوى على الوظيفه clear التى تقوم بمحو جميع ال key/value .

الكائن sessionStorage و localStorage مشتقين من النوع Storage :

alert(sessionStorage instanceof Storage); //true

localStorage

الكائن localStorage يطابق interface الكائن sessionStorage و عليه فإنه يحتوى على نفسه خصائصه و وظائفه ، المهم هو ان طريقه عمله تختلف ، حيث يمكنه تخزين و الوصول للبيانات فى صوره ازواج key/value من بدايه كتابتها إلى مسحها ، القيم تظل محفوظه عند التنقل بين الصفحات لنفس الدومين حتى بعد اغلاق النافذه او حتى اعاده تشغيل المتصفح او الكمبيوتر لنفس الدومين .

// set key/value in localStorage
localStorage.goal = "world domination";
//close the page, open it
alert(localStorage.goal); //world domination

globalStorage

firefox2 قام بإدراج الكائن globalStorage الذى تم محوه من مواصفات HTML5 بعد اصدار Firefox2 ، الكائن globalStorage له أيضا نفس ال interface الخاص ب sessionStorage و localStorage لكنه يعمل تماما مثل localStorage ، و قد تم محوه من المواصفات و تقديم localStorage ، يقوم ال globalStorage بتخزين القيم على مستوى الدومين كما يلى :

globalStorage['www.keepondev.com'].name = "Mostafa Farghaly";
alert(globalStorage['www.keepondev.com'].name); //Mostafa Farghaly

يمكنك استخدام الوظيفه التاليه للحصول على globalStorage او localStorage فى حاله تواجد احداهما مع اعطاء الاولويه للتانى :

function getStorage(){
    return (localStorage) ? localStorage : globalStorage[location.hostname];
}

var storage = getStorage();
storage.whyProgramme = "for fun";

ال localStorage مقيد بال host+schema+port لذلك http://www.keepondev.com لا يمكنه قراءه بيانات https://www.keepondev.com لتغير ال schema من http إلى https ، اما ال globalStorage فمقيد بال host فقط ، لذلك الاول اكثر امانا .

الحدث storage

يمكن الاستماع الى الحدث storage الذى يتولد عند كتابه او تعديل او محو اى key/value للكائن localStorage او sessionStorage ، يتم تمرير كائن الحدث storage event إلى الوظيفه التى تستمع للحدث ، و يحتوى على الكثير من الخصائص التى تعرفك المزيد عن الحدث مثل اى key تم تغيره او اضافته ، ماهى القيمه الجديده لهذا ال key … الخ كما يوضح المثال البسيط التالى :


document.body.addEventListener("storage", function(storageEvent){
    alert("the modified key's " + storageEvent.key); //name
    alert("the new value's " + storageEvent.newValue); //John Resig
    alert("the old value was " + storageEvent.oldValue); //Mostafa Farghaly
    alert("the page that made the change's " + storageEvent.url);
    // keepondev.com
    alert("the window where change was made's " storageEvent.source);
    // this [window object]
});

sessionStorage.name = "John Resig"; // fires storage event and call the listening function

الصفحات التى تحت نفس الدومين الواحد فقط هى التى تستطيع الاستماع للحدث storage و الوصول لخصائص كائن الحدث storage .

browser support

وقت كتابه هذه التدوينه :
الكائنات localStorage و sessionStorage مدعم فى FireFox3+, IE8, Safari4
الكائن globalStorage موجود فى Firefox2
انترنت اكسبلورر يحتوى على userDate behaviour لهه وظائف مماثله لتخزين البيانات .

للمزيد
cookies
MDC DOM Storage
IE userData
Flash local Storage
Apple developer connection key-value storage

About these ads

الأوسمة: , , , , , ,

10 تعليقات to “HTML5 storage الجزء الاول”

  1. Eslam Says:

    بصراحة وودت التعليق منذ فترة على مدونتك
    رائع جدا صراحة لم أجد هذه المعلومات باللغة العربية إلا هنا

    بالنسبة ل HTML 5
    الوضع لم يستقر بالنسبة لها و دعمها يختلف من متصفح لأخر و طبعا internet explorer يأتى فى آخر القائمة
    كنت أود وضع بعض المقالات عن أوسمة HTML5 الجديدة مثل header و footer و canvas و video
    كذلك عن css3 لكنى لم أجد الوقت
    إلى الأمام يا مصطفى … متابع بشغف

  2. mostafa farghaly Says:

    اذا كنت تريد التدوين معى انا موافق ، انا اساسا سأدون ان شاء الله عن كل مزايا ال html5 فى المتصفحات الجديده ، و كنت اريد التدوين عن عن بعض الجديد فى css3 و بالذات ما اوجدته apple مثل css animation و css transformation و css transitions و css mask و css gradient و غيره ، اذا تريد التدوين معى قولى ، و انا بإذن الله سأكتب موضوع بخصوص هذا الصدد (التدوين الجماعى)

    • 3alia Says:

      حقيقة مدونة رائعة وشرح مميز جدا لـ HTML5 storage
      متابعة وبحماس لمدونتك ولكل التدوينات القادمة عن مزايا الـ html5 والجديد فى css3 بإذن الله.
      ربنا يحفظك ومتابعين جدا.

  3. Eslam Says:

    يسعدنى بالطبع التدوين معك
    لكنى كما ذكرت سابقا أنى لا أجد الوقت الكافى , الحياة و العمل
    على العموم إذا أتيحت لدى الفرصة سأراسلك بخصوص هذا الشأن

  4. Taha Says:

    يا اسلام الراجل ده مش هتلاقى زيه ;)

    على فكرة دعم المتصفحات لخصائص HTML 5 مش بعيد اوى انا معاك ان انترنت اكسبلور فى اخر القائمة لكن برضه مش بعيد

    جرب خصائص HTML 5 الى هنا

    http://www.whatwg.org/demos/2008-sept/

    فى انترنت اكسبلور و هتلاقيها شغالة “مش كلها طبعا”

    @مصطفى : يا رييت يبقى فى امثالة مع الدروس الى تحتاج لامثلة “يعنى مجرد اقتراح”

    • mostafa farghaly Says:

      @طه : انا فى كل درس يشرحه بيبقى كود يوضح الفكره العامه ، لو الفكره صعبه شويه اوكى مفيش مانع من الامثله ، لكن حاجه ذى ال storage بإستخدام localStorage و sessionStorage سهله اوى و مستاهله ، على فكره انا سعيد عشان انت حطيت لينك لفيديو انا شفته من فتره ، بفرح لما الافى حد متابع ذيى و يشاركنى نفس هواياتى

  5. سلسة دروس عن HTML5 و CSS3 بمناسبة رمضان - سوالف سوفت Says:

    […] قد بدأت بالفعل بشرح وسائل التخزين الجديد فى هذا الدرس HTML5 storage الجزء الاول و إن شاء الله سأواصل حتى انهى ما بدأت به __________________ […]

  6. الغالي Says:

    موضوع رائع

    بالتوفيق لك

  7. غير معروف Says:

    […] […]

  8. Rashdan Says:

    رااااااااااااااااااائع جدا جدا جدا …بصراحة الله يعطيك العافيه.
    بس اذا ممكن انه يكون هناك المزيد من الامثله التطبيقية وخصوصا على موضوع ال storage بمختلف انواعه …وياااريت يكون هناك فيديو يوضح هذه الامثلة.
    مع الشكر جزيل والى الامام ان شاء الله.

أضف تعليق

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

WordPress.com Logo

You are commenting using your WordPress.com account. تسجيل خروج   / تغيير )

Twitter picture

You are commenting using your Twitter account. تسجيل خروج   / تغيير )

Facebook photo

You are commenting using your Facebook account. تسجيل خروج   / تغيير )

Google+ photo

You are commenting using your Google+ account. تسجيل خروج   / تغيير )

Connecting to %s


تابع

Get every new post delivered to your Inbox.

%d مدونون معجبون بهذه: