التخزين المحلي لـ HTML

التخزين المحلي لـ HTML: أفضل من الكوكي.

ما هو التخزين المحلي لـ HTML؟

من خلال التحفظ المحلي (Local Storage)، يمكن للتطبيقات الويب حفظ البيانات المحلية في متصفح المستخدم.

قبل HTML5، يمكن حفظ بيانات التطبيق فقط في الكوكي، بما في ذلك كل طلب خادم. التحفظ المحلي أكثر أمانًا، ويمكن حفظ بيانات كبيرة في المحل دون تأثير على أداء الموقع.

مختلفًا عن الكوكي، يزيد التحفظ من الحد الأدنى (عن 5MB)، ولاتتكون المعلومات من نقلها إلى الخادم.

التحفظ المحلي من خلال المكان الأصلي (origin) (من خلال المجال والبروتوكول). يمكن للصفحات من المكان الأصلي، حفظ وتواصل نفس البيانات.

دعم المتصفح

الجداول في الصفحة تشير إلى إصدارات المتصفح التي تدعم التخزين المحلي بشكل كامل.

API
Web Storage 4.0 8.0 3.5 4.0 11.5

كائنات التخزين المحلي في HTML

يقدم التخزين المحلي في HTML كائنين لتحميل البيانات على الجانب المشترك:

  • window.localStorage - تخزين بيانات بدون تاريخ انتهاء صلاحية
  • window.sessionStorage - تخزين البيانات لفترة الجلسة (تُحذف البيانات عند إغلاق علامة التبويب المتصفح)

عند استخدام التخزين المحلي، قم بفحص دعم المتصفح لتخزين localStorage وsessionStorage:

if (typeof(Storage) !== "undefined") {
    // رمز localStorage/sessionStorage
} else {
    // عذراً، لا يدعم Web Storage ..
}

عنصر localStorage

يخزن عنصر localStorage بيانات لا تملك تاريخ انتهاء صلاحية. لا يتم حذف البيانات عند إغلاق المتصفح، وتبقى متاحة في اليوم، الأسبوع أو السنة القادمة.

مثال

// حفظ
localStorage.setItem("lastname", "Gates");
// استرجاع
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

جرب بنفسك

توضيح المثال:

  • إنشاء أزواج الأسماء/القيم في localStorage، حيث: name="lastname"، value="Gates"
  • استرجاع قيمة "lastname"، وإدراجها في العنصر الذي يحتوي على id="result"

يمكن كتابة المثال السابق أيضًا كالتالي:

// حفظ
localStorage.lastname = "Gates";
// استرجاع
document.getElementById("result").innerHTML = localStorage.lastname;

النحو لإزالة مشروع localStorage "lastname":

localStorage.removeItem("lastname");

التعليقات: يتم تخزين أزواج الأسماء/القيم دائمًا كنصوص. تأكد من تحويلها إلى صيغة أخرى إذا لزم الأمر!

مثال أدناه يوضح كيفية حساب عدد النقرات التي قام المستخدم بضربها على الزر. يتم تحويل نص القيمة إلى عدد، ويتم تدرج الحساب بشكل متتابع:

مثال

if (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
    localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "لقد ضغطت على هذا الزر " +
localStorage.clickcount + " مرة.";

جرب بنفسك

عنصر sessionStorage

عنصر sessionStorage متطابق مع localStorage، ولكن الفرق هو أنه يخزن البيانات فقط في الجلسة. إذا قام المستخدم بإغلاق علامة التبويب الخاصة بالمتصفح، يتم حذف البيانات.

في المثال التالي، يتم حساب النقرات للمستخدم على الزر في الجلسة الحالية:

مثال

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "في هذه الجلسة، لقد ضغطت على هذا الزر " +
sessionStorage.clickcount + " مرة.";

جرب بنفسك