
55- تخزين الويب HTML: بديل أفضل للكوكيز
ما هو تخزين الويب في HTML؟
يسمح لنا تخزين الويب بتخزين بيانات تطبيقات الويب بشكل محلي داخل متصفح المستخدم. قبل ظهور HTML5، كان علينا تخزين بيانات التطبيقات في الكوكيز، والتي تُرسل مع كل طلب يُرسل إلى الخادم. يوفر تخزين الويب مزايا عديدة مقارنة بالكوكيز:
- أكثر أماناً: لا يتم إرسال بيانات تخزين الويب إلى الخادم، مما يقلل من خطر اختراق البيانات.
- مساحة تخزين أكبر: تتيح مساحة التخزين الكبيرة (5 ميجابايت على الأقل) تخزين كميات كبيرة من البيانات دون الحاجة إلى الاعتماد على خادم خارجي.
- أداء أسرع: لا يؤثر تخزين البيانات محلياً على أداء موقع الويب، إذ لا حاجة لارسال واستقبال البيانات مع كل طلب.
- متصفح محدد: يتم تخزين البيانات وفقاً لمصدر الموقع (النطاق والبروتوكول)، ويمكن لجميع الصفحات من نفس المصدر الوصول إلى نفس البيانات وتخزينها.
دعم المتصفحات لتخزين الويب HTML
يوضح الجدول أدناه أول إصدار من المتصفحات المختلفة الذي يدعم واجهة برمجة تطبيقات تخزين الويب بشكل كامل:
**المتصفح | الإصدار** |
---|---|
**Chrome | 4.0** |
**Firefox | 8.0** |
**Internet Explorer | 5.5** |
**Opera | 12.0** |
**Safari | 6.0** |
كائنات تخزين الويب HTML
يوفر تخزين الويب في HTML كائنين لتخزين البيانات على جانب العميل (أي داخل متصفح المستخدم):
- window.localStorage:
- يخزن البيانات بدون تاريخ انتهاء صلاحية، وتبقى البيانات محفوظة حتى بعد إغلاق المتصفح وإعادة فتحه لاحقاً.
- مثالي لتخزين البيانات التي نحتاجها لفترات طويلة، مثل إعدادات الموقع أو تفضيلات المستخدم.
- window.sessionStorage:
- يخزن البيانات لجلسة واحدة فقط، وتختفي البيانات عند إغلاق علامة التبويب أو النافذة الحالية.
- مثالي لتخزين البيانات المؤقتة التي نحتاجها فقط أثناء تفاعل المستخدم الحالي، مثل حالة التطبيق أو المعلومات المدخلة في حقل نصي.
قبل استخدام خاصية تخزين الويب، يجب التحقق من دعم المتصفح لهاتين الخاصيتين باستخدام الكود التالي:
if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
} else {
// Sorry! No Web Storage support..
}
كائن localStorage
يخزن كائن localStorage البيانات بدون تاريخ انتهاء صلاحية. حيث تبقى البيانات محفوظة حتى بعد إغلاق المتصفح وإعادة فتحه لاحقًا، مما يجعلها متاحة في اليوم التالي أو الأسبوع أو حتى بعد عام.
مثال:
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
شرح الكود:
- localStorage.setItem(“lastname”, “Smith”);:
- هذا السطر ينشئ زوجًا من الاسم/القيمة في localStorage بالاسم “lastname” والقيمة “Smith”.
- document.getElementById(“result”).innerHTML = localStorage.getItem(“lastname”);:
- هذا السطر يسترجع قيمة “lastname” من localStorage ويضيفها إلى محتوى العنصر الذي يحمل المعرف “result”.
ملاحظة هامة: يتم تخزين أزواج الاسم/القيمة دائمًا كسلسلة نصية (strings). يجب تذكر تحويلها إلى تنسيقات أخرى عند الحاجة!
مثال آخر:
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).";
شرح المثال:
- يقوم هذا الكود بعدد المرات التي ينقر فيها المستخدم على زر ما.
- يتم تحويل قيمة clickcount إلى رقم (Number) حتى نتمكن من زيادة العداد بشكل صحيح.
- إذا لم تكن قيمة clickcount موجودة في localStorage، يتم تعيينها إلى 1.
- يتم عرض عدد النقرات في العنصر الذي يحمل المعرف “result”.
كائن 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.";