يعتبر التخزين على الويب أفضل من عملية التخزين باستخدام الكوكيز .
ماهي عملية تخزين البيانات على الويب في HTML5 ؟
باستخدام لغة HTML5 يمكن حفظ بيانات المستخدم محلياً على جهازه الشخصي .
قبلاً كان تخزين البيانات يتم محلياً كالكوكيز ولكن يعتبر استخدام تخزين البيانات على شبكة الويب أكثر أماناً و سرعة . حيث لا يتم تخزين البيانات في كل عملية ارسال للسيرفر بل عند السؤال فقط . كما أنه يمكن تخزين كميات كبيرة من البيانات و بدون أي تأثير على حركة الموقع .
المتصفحات الداعمة
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgar6FGZN6kaUj11CMH5FSkS8gZJ1QNAMjYAUv81v5u_3MGJO9-TMOsVDgOvlfX49Fg3SPc7cBJvHhWGJkZG_wffAr-U1pQu-5B2zlhyPsbaHQ2kDnsW3sMF31RFgP9CQKiYy2b8XUC4vWO/s1600/yes_chrome.gif)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMqYU8uJn1imVl06riBp6Hi-7Sc11tUhgQAZS6JU6I1a2mNBM0NfroDjfvanKamkCyD_JP1VtENEZVZlYGJZyKLF9sh-ELWVLo0S0tdLbgUiqfKuli5kO9s-7wyij_Q8IltR8VF3oy7LHB/s1600/yes_firefox.gif)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmfr-NLIqlXOTozYnxgfBzfxlgVn7XToGdjqBGuyLkzmIWWhd7Utovsg3zJBLD1zL20klRfG_a3sT1VIsJptcW2hJ3p5PV1UF3bsW5I78FUR8mJdsSOMJ9LWdBs6llYE5D4TaMmHvNOdqB/s1600/yes_ie.gif)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZEH6KTa6T6TrzZQHRk7wVDVTRnWyGKfLOya-I_fcqBFiZw3xoQ42YAAcVu2degHxdoZtTYqZDMrRTtrmz-AR9HW-matRtAYNh2IZAgyDwbR-q6tljDg0MXURvPKfeQzp0IADHtsq2KQ1y/s1600/yes_opera.gif)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq39lY_8NUYwuzMjFSsSzgq6c2ym1Wk0BCvMNEtuKa6m47BSk6uTcq38mqNA26ucQrR6olixoz_5EZtJvOf2rzRxQP3sAsk4p8EWLbmZgoHDL20zwO-COKob3g25iDpylVS2nwEZVW1VEu/s1600/yes_safari.gif)
عملية تخزين البيانات على الويب مدعومة من جميع المتصفحات .
ماهو 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.";
ليست هناك تعليقات:
إرسال تعليق