تخزين محلي HTML

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

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

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

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

مختلفًا عن ملفات الـ cookie، يبدو الحد الأدنى للتخزين أكبر بكثير (على الأقل 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، ولكن الفرق هو أن البيانات يتم تخزينها فقط لجلسة واحدة. إذا أغلق المستخدم علامة التبويب الخاصة بالbrowser، يتم حذف البيانات.

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

مثال

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

جرب بنفسك