HTML التخزين المحلي، أفضل من cookies .
ما هو HTML التخزين المحلي؟
مع التخزين المحلية، يمكن لتطبيقات الويب تخزين البيانات محليا داخل متصفح المستخدم.
قبل HTML5، كانت بيانات التطبيق ليتم تخزينها في cookies ، المدرجة في كل طلب الخادم. التخزين المحلي هو أكثر أمنا، وكميات كبيرة من البيانات التي يمكن تخزينها محليا، دون التأثير على أداء الموقع.
وخلافا ل cookies ، والحد من تخزين أكبر بكثير (at least 5MB) ولم يتم نقل المعلومات إلى الملقم.
التخزين المحلي هو في الأصل (per domain and protocol) . كل الصفحات، من أصل واحد، ويمكن تخزين والوصول إلى نفس البيانات.
التخزين المحلي وجلسة
يقدم التخزين على شبكة الإنترنت مختلفين المناطق المحلية تخزين تخزين وجلسة التخزين التي تختلف في نطاق ومدى الحياة.
البيانات وضعت في التخزين المحلي هو في الأصل (مزيج من البروتوكول، واسم المضيف، ورقم المنفذ كما هو محدد في سياسة المصدر الأوحد) (البيانات متاحة لجميع النصوص تحميلها من صفحات من نفس المنشأ الذي سبق تخزين البيانات) و استمرت بعد إغلاق المتصفح.
تخزين الدورة هو في الأصل لكل نافذة أو لسان ويقتصر على عمر النافذة. والمقصود تخزين الجلسة للسماح للحالات منفصلة من تطبيق ويب نفسه لتشغيل في ويندوز مختلفة دون التداخل مع بعضها، وهي قضية استخدام الأخرى التي ليست مدعومة جيدا الكوكيز.
دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل التخزين المحلي.
| API | |||||
|---|---|---|---|---|---|
| Web Storage | 4.0 | ثمانية | 3.5 | 4.0 | 11.5 |
كائنات HTML التخزين المحلي
يوفر HTML التخزين المحلي كائنين لتخزين البيانات على العميل:
- window.localStorage - مخازن البيانات مع عدم وجود تاريخ انتهاء الصلاحية
- window.sessionStorage مخازن البيانات لدورة واحدة (يتم فقدان البيانات عند إغلاق علامة تبويب المتصفح) -
قبل استخدام التخزين المحلي، والتحقق من دعم المتصفح ل localStorage و sessionStorage :
if(typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
} else {
// Sorry! No Web Storage support..
}
كائن التخزين المحلي
الكائن التخزين المحلي بتخزين البيانات، وبدون تاريخ انتهاء الصلاحية. لن يتم حذف البيانات عند إغلاق المتصفح، وسوف تكون متاحة في اليوم التالي أو الأسبوع أو السنة.
مثال
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname"); انها محاولة لنفسك » وأوضح سبيل المثال:
- إنشاء localStorage زوج الاسم / القيمة مع name="lastname" و value="Smith"
- استرداد قيمة "lastname" وأدخله في عنصر مع معرف = "النتيجة"
في المثال أعلاه ويمكن أيضا أن يكتب مثل هذا:
// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;
بناء الجملة من أجل إزالة "lastname" البند التخزين المحلي على النحو التالي:
localStorage.removeItem("lastname");
ملاحظة: يتم تخزين أزواج الاسم / القيمة دائما كسلاسل. تذكر لتحويلها إلى تنسيق آخر عند الحاجة!
بحساب المثال التالي عدد مرات المستخدم النقر على زر. في هذه التعليمة البرمجية يتم تحويل سلسلة القيمة لعدد لتكون قادرة على زيادة العداد:
مثال
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
localStorage.clickcount + " time(s)."; انها محاولة لنفسك » و sessionStorage كائن
و sessionStorage الكائن يساوي localStorage الكائن، إلا أنه يقوم بتخزين البيانات لدورة واحدة فقط. يتم حذف البيانات عند إغلاق المستخدم التبويب متصفح معين.
بحساب المثال التالي يوضح عدد المرات التي ينقر المستخدم على زر، في الدورة الحالية:
مثال
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session."; انها محاولة لنفسك »