آموزش HTML 5 - ذخیره سازی اطلاعات کاربران در صفحات وب Web Storage & Cookie
آموزش HTML 5 - ذخیره سازی اطلاعات کاربران در صفحات وب
Web Storage & Cookie
مقدمه ذخیره سازی اطلاعات :
یکی از فابلیت ها و ویژگی های جدید که به HTML 5 ، اضافه شده است ، امکان ذخیره و بازیابی اطلاعات کاربران در صفحات وب توسط خاصیت web storage است .
برای مثال شما هنگامی که وارد یک سایت شده و نام کاربری و رمز عبور خود را وارد می کنید ، مرورگر این اطلاعات را به خاطر می سپارد . در بازدید از صفحات دیگر همان سایت دیگر لازم نیست ، مجددا اطلاعات کاربری خود را وارد نمایید . یا مثلا فردا که به آن سایت سر می زنید ، متوجه می شوید از قبل در سایت log in شده اید .
با این امور آشنا هستید . تکرار آنها برای تشریح بیشتر مسئله است . این کارها در HTML 4 و یا در PHP توسط کوکی ها cookies انجام می شوند . اما در HTML 5 به جای کوکی ها ، قابلیت درون ساخته ایی اضافه شده است ، که کار آنها را انجام می دهد .
مسلما با مفهوم کوکی آشنا هستید ، اما برای یادآوری به توضیح مجدد cookie و کار آن می پردازیم .
کوکی چیست ؟
کوکی یک قطعه اطلاعات است که سرور بر روی کامپیوتر کاربر ذخیره کرده و در مراجعات کاربر به همان سایت ، از آن اطلاعات برای شناسایی وی استفاده می کند . این اطلاعات معمولا راجع به شناسه کاربری ، رمز عبور ، تنظیمات یک کاربر بر روی سایت و ... می باشد . زمانی که کاربر به وسیله کامپیوتر خود همان سایت را باز می کند ، مرورگر اطلاعات کوکی ها را به سرور ارسال می کند . از کوکی برای بازیابی اطلاعات کاربری و یا سایر تنظیماتی که کاربر در یک سایت ایجاد کرده است ، در مراجعات بعدی به همان سایت استفاده می شود .
web storage چیست ؟
توسط web storage در HTML 5 ، اطلاعات کاربران می تواند به صورت محلی در مرورگر و کامپیوتر کاربر ذخیره شود .
web storage از کوکی ها مطمئن تر و سریعتر بوده و حجم بالاتری از اطلاعات را می توان به وسیله آن ذخیره نمود . اطلاعات ذخیره شده در web storage فقط در زمان هایی که به آنها نیاز است ، ارسال می شوند ، برخلاف کوکی ها که با هر بار درخواست صفحه ، آنها نیز ارسال می شوند . اطلاعات کاربران به وسیله این خاصیت ، توسط جفت های نام و مقدار ذخیره می شوند . این جفت شامل یک نام منحصر به فرد و یک مقدار دلخواه است . در ادامه به تشریح ، نحوه استفاده از این قابلیت می پردازیم ، اما ابتدا به بررسی سازگاری آن با مرورگرهای مطرح می پردازیم .
پشتیانی مرورگرهای مختلف از خاصیت web storage :
http://pnu-club.com/imported/2012/07/124.gif http://pnu-club.com/imported/2012/07/125.gif http://pnu-club.com/imported/2012/07/123.gif http://pnu-club.com/imported/2012/07/122.gif
این خاصیت در تمام نسخه های جدید مرورگرهای مطرح پشتیانی می شود . به وسیله کد زیر نیز می توان پشتیانی یا عدم پشتیانی مرورگر مورد نظر خود از این خاصیت را بررسی کرد :
خروجی این کد نیز نمایش داده شده است . به وسیله خروجی می توانید پشتیبانی مرورگرتان را از این خاصیت مشاهده نمایید .
| Syntax |
< script type="text/javascript" >
if ( typeof ( Storage ) ! == " undefined " )
{
document.write ( " Yes! localStorage and sessionStorage support! " ) ;
}
else
{
document.write ( " Sorry! No web storage support.. " ) ;
}
< /script > |
| خروجی |
Yes! localStorage and sessionStorage support! |
انواع حالت ها و اشیای شی web storage :
دو نوع شی و حالت برای نگهداری و دخیره اطلاعات کاربر توسط شی web storage وجود دارد . در لیست زیر به معرفی این دو حالت پرداخته ایم . برای دریافت اطلاعات بیشتر راجع به هر کدام بر روی نام آن کلیک نمایید :
- شی localStoarge : این شی برای نگهداری اطلاعات به مدت طولانی استفاده می شود . اطلاعات ذخیره شده توسط این شی بر روی کامپیوتر کاربر قرار گرفته و با بسته شدن مرورگر و یا خاموش کردن کامپیوتر از بین نمی روند و در آینده قابل بازیابی هستند .
- شی sessionStorage : این شی برای نگهداری اطلاعات به صورت موقت به کار رفته و در حافظه موقت کامپیوتر کاربر ذخیره می شود . با بسته شدن صفحه جاری در مرورگر و خاموش شدن کامپیوتر ، این اطلاعات نیز از بین رفته و دیگر قابل بازیابی نیستند .
