تخزين البيانات على الويب

يعتبر التخزين على الويب أفضل من عملية التخزين باستخدام الكوكيز .

ماهي عملية تخزين البيانات على الويب في HTML5 ؟

باستخدام لغة HTML5 يمكن حفظ بيانات المستخدم محلياً على جهازه الشخصي .
قبلاً كان تخزين البيانات يتم محلياً كالكوكيز ولكن يعتبر استخدام تخزين البيانات على شبكة الويب أكثر أماناً و سرعة . حيث لا يتم تخزين البيانات في كل عملية ارسال للسيرفر بل عند السؤال فقط . كما أنه يمكن تخزين كميات كبيرة من البيانات و بدون أي تأثير على حركة الموقع .

---

المتصفحات الداعمة

| | | |

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

---

ماهو localStorage و sessionStorage

يوجد نوعان من الكائنات التي تقوم بعملية تخزين البيانات :

• localStorage : يخزن البيانات بدون تاريخ محدد لانتهاء المدة .
• sessionStorage : يخزن البيانات لجلسة واحدة .

قبل البدء بتجربة التخزين على الويب يجب أولاً التاكد فيما اذا كان المتصفح يدعم localStorage و sessionStorage  :

if(typeof(Storage)!=="undefined")
{
// نعم! متصفحك يدعم localStorage و sessionStorage
// بعض الكود
}
else
{
// للأسف المتصفح لايدعم تلك الخاصيات
}

---

الكائن localStorage

يخزن الكائن localStorage البيانات بدون أي تاريخ او وقت لانتهاء مدة التخزين . كما أنه لن يتم حذف هذه البيانات عند اغلاق المتصفح وستكون متوفرة في اليوم التالي أو الاسبوع أو الشهر أو السنة التالية أيضاً .
مثال

localStorage.lastname="Smith";
document.getElementById("result").innerHTML="Last name: "
+ localStorage.lastname;

شرح المثال السابق 

•  قمنا بإنشاء localStorage زوج من المفتاح و القيمة key/value أي أن المفتاح هو key="lastname" و القيمة value="Smith" .
•  استرجاع قيمة lastname و إضافتها الى العنصر الجديد الموجود ضمن id="result" .

ملاحظة : يتم تخزين المفتاح و القيمة key/value كنص عادي 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).";

---

الكائن 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.";

---