واجهة برمجة تطبيقات تخزين الويب HTML
تخزين الويب HTML ؛ أفضل من ملفات تعريف الارتباط.
ما هو تخزين الويب HTML؟
باستخدام تخزين الويب ، يمكن لتطبيقات الويب تخزين البيانات محليًا داخل متصفح المستخدم.
قبل HTML5 ، كان يجب تخزين بيانات التطبيق في ملفات تعريف الارتباط ، بحيث يتم تضمينها في كل طلب خادم. يعد تخزين الويب أكثر أمانًا ، ويمكن تخزين كميات كبيرة من البيانات محليًا ، دون التأثير على أداء موقع الويب.
على عكس ملفات تعريف الارتباط ، يكون حد التخزين أكبر بكثير (على الأقل 5 ميجابايت) ولا يتم نقل المعلومات إلى الخادم مطلقًا.
تخزين الويب حسب الأصل (لكل مجال وبروتوكول). يمكن لجميع الصفحات ، من أصل واحد ، تخزين نفس البيانات والوصول إليها.
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المستعرض الأول الذي يدعم التخزين على الويب بشكل كامل.
| API | |||||
|---|---|---|---|---|---|
| Web Storage | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
كائنات تخزين ويب HTML
يوفر تخزين الويب بتنسيق HTML كائنين لتخزين البيانات على العميل:
window.localStorage- يخزن البيانات بدون تاريخ انتهاء الصلاحيةwindow.sessionStorage- يخزن البيانات لجلسة واحدة (يتم فقد البيانات عند إغلاق علامة تبويب المتصفح)
قبل استخدام تخزين الويب ، تحقق من دعم المستعرض للتخزين المحلي وتخزين الجلسة:
if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
}
else {
// Sorry! No Web Storage support..
}
كائن localStorage
يقوم كائن التخزين المحلي بتخزين البيانات بدون تاريخ انتهاء الصلاحية. لن يتم حذف البيانات عند إغلاق المتصفح ، وستكون متاحة في اليوم أو الأسبوع أو السنة التالية.
مثال
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
شرح المثال:
- إنشاء اسم تخزين محلي / زوج قيمة مع الاسم = "اسم العائلة" والقيمة = "سميث"
- استرجع قيمة "lastname" وأدخلها في العنصر بالمعرف = "نتيجة"
يمكن أيضًا كتابة المثال أعلاه على النحو التالي:
// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.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يساوي كائن التخزين المحلي ، باستثناء
أنه يخزن البيانات لجلسة واحدة فقط. يتم حذف البيانات عندما يغلق المستخدم علامة تبويب المتصفح المحددة.
يحسب المثال التالي عدد المرات التي نقر فيها المستخدم على زر في الجلسة الحالية:
مثال
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.";