HTML5 Web Storage API

تخزين الويب (Web storage) أفضل وأكثر أمانًا من ملفات تعريف الارتباط (cookies).

ما هو الـ Web storage؟

تتيح لك ميزة تخزين الويب (web storage) في HTML5 تخزين بعض المعلومات محليًا على جهاز كمبيوتر العميل (المستخدم) ، مثل ملفات تعريف الارتباط (cookies) ، ولكنها أسرع وأفضل بكثير من ملفات تعريف الارتباط.

قبل HTML5 ، كان يجب تخزين بيانات التطبيق في ملفات تعريف الارتباط، وتضمينها في كل طلب خادم HTTP.

يعد تخزين الويب أكثر أمانًا ، ويمكن تخزين كميات كبيرة من البيانات محليًا ، دون التأثير على أداء موقع الويب، على عكس ملفات تعريف الارتباط، يكون حد التخزين أكبر بكثير (على الأقل 5 ميغابايت) ولا يتم نقل المعلومات إلى الخادم مطلقًا.

أنواع التخزين على الويب – Web Storage

هناك نوعان من التخزين على الويب:

1. التخزين المحلي (Local Storage): يستخدم التخزين المحلي كائن localStorage لتخزين البيانات لموقعك الإلكتروني بالكامل على أساس دائم (هذا يعني أن البيانات المحلية المخزنة ستكون متاحة دائمًا ما لم تقم بإزالتها).
2. تخزين الجلسة (Session Storage): يستخدم تخزين الجلسة كائن sessionStorage لتخزين البيانات على أساس مؤقت، لنافذة متصفح أو علامة تبويب واحدة (هذا يعني أن البيانات تختفي عند انتهاء الجلسة ، أي عندما يغلق المستخدم نافذة المتصفح أو علامة التبويب).

التخزين المحلي – Local Storage

Local Storage object

يخزن كائن التخزين المحلي البيانات بدون تاريخ انتهاء الصلاحية.

يتم تخزين البيانات في زوج (key / value):

• يحدد المفتاح (key): اسم المعلومات (مثل “username”).
• والقيمة (value): هي القيمة المرتبطة بهذا المفتاح (مثل “Hamed”).

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

// Store data
localStorage.setItem("username", "Hamed");

// Retrieve data
document.getElementById("demo").innerHTML = "Hi, " + localStorage.getItem("username");

توضيح المثال السابق:

• يخزن localStorage.setItem(key, value) القيمة المرتبطة بمفتاح.
• يسترد localStorage.getItem(key) القيمة المرتبطة بالمفتاح.

يمكنك الحصول على نفس نتيجة كود المثال السابق، كالتالى:

// Store data
localStorage.username = "Hamed";

// Retrieve data
document.getElementById("demo").innerHTML = "Hi, " + localStorage.username;

مثال للتوضيح أكثر – Local Storage

فى المثال التالى، تم إنشاء “counter” فى كل مرة تقوم بعمل Refresh للصفحة أو غلق علامة التبويب أو المتصفح يتم زيادة الـ “counter” رقمين:

if (localStorage.counter) {
    localStorage.counter = Number(localStorage.counter) + 2;
} else {
    localStorage.counter = 2;
}

document.getElementById("demo").innerHTML = "Number of counter: " + localStorage.counter;

تخزين الجلسة – Session Storage

Session Storage object

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

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

if (sessionStorage.counter) {
    sessionStorage.counter = Number(sessionStorage.counter) + 2;
} else {
    sessionStorage.counter = 2;
}

document.getElementById("demo").innerHTML = "Number of counter: " + sessionStorage.counter;

فى المثال السابق، تم إنشاء “counter” فى كل مرة تقوم بعمل Refresh للصفحة يتم زيادة الـ “counter” رقمين، لكن إذا قُمت بغلق علامة التبويب أو المتصفح فسيبدأ العداد (counter) من البداية.

حذف تخزين الويب – Delete Web storage

لإزالة اى عنصر تخزين محلي ستحتاج إلى الاتصال بـ localStorage.remove(‘key’)    حيث الـ “key” هو مفتاح القيمة التي تريد إزالتها، كما يلي:

// Remove "username" data
localStorage.removeItem("username");

إذا كنت تريد مسح جميع الإعدادات ، فأنت بحاجة إلى استدعاء طريقة ()localStorage.clear، كالتالى:

// clear all local storage data
localStorage.clear();

دعم المتصفحات لتخزين الويب – Web storage