ذخیره سازی اطلاعات کاربر

ذخیره سازی اطلاعات

یکی از فابلیت ها و ویژگی های جدید که به HTML 5 ، اضافه شده است ، امکان ذخیره و بازیابی اطلاعات کاربران در صفحات وب توسط خاصیت web storage است .
برای مثال شما هنگامی که وارد یک سایت شده و نام کاربری و رمز عبور خود را وارد می کنید ، مرورگر این اطلاعات را به خاطر می سپارد . در بازدید از صفحات دیگر همان سایت دیگر لازم نیست ، مجددا اطلاعات کاربری خود را وارد نمایید . یا مثلا فردا که به آن سایت سر می زنید ، متوجه می شوید از قبل در سایت log in شده اید .
با این امور آشنا هستید . تکرار آنها برای تشریح بیشتر مسئله است . این کارها در HTML 4 و یا در PHP توسط کوکی ها cookies انجام می شوند . اما در HTML 5 به جای کوکی ها ، قابلیت درون ساخته ایی اضافه شده است ، که کار آنها را انجام می دهد .

ذخیره سازی اطلاعات ذخیره سازی اطلاعات ذخیره سازی اطلاعات کاربر Web Storage Cookie

ذخیره سازی اطلاعات

مسلما با مفهوم کوکی آشنا هستید ، اما برای یادآوری به توضیح مجدد cookie و کار آن می پردازیم .

 Web Storage یکی از امکانات جدیدی است که برای ذخیره اطلاعات در مرورگر کاربر در html5 اضافه شد و دارای دو متغیر نام و مقدار است.

Web Storage چه تفاوت ها و شباهت هایی با کوکی ها دارد؟
 
۱- کوکی ها در هر درخواست به سرور ارسال میشوند اما از Web Storage فقط میشود در مرورگر کاربر استفاده کرد.
۲- در Web Storage نسبت به کوکی ها اطلاعات بیشتری میشود ذخیره کرد.
۳- استفاده از Web Storage بسیار آسون تر از کوکی هاست.
۴- برخلاف کوکی ها مدت زمان اتمام اعتبار یک شیئ Web Storage قابل تعیین نیست اما اطلاعات را با دو نوع مختلف محلی (local) و جلسه ای (session) میتوان ذخیره کرد.

  مرورگر هایی که از Web Storage پشتیبانی میکنند.
 
 Firefox, Opera, Chrome, Safari و نسخه های بالاتر از ۸ اینترنت اکسپلورر نیز از این امکان پشتیبانی میکنن

پس, از مزایای webstorage این است که :

  1. حجم زیادی از اطلاعات را handle میکند.
  2. هیچ مقدار اضافی را در HTTP REQUEST HEADER نگه داری و ارسال نمی کند.
  3. دستور زبان مورد استفاده اش هم بسیار راحت وساده است.

البته خود ویژگی webstorage به صورت ریز تر به دو دسته تقسیم میشود:

  1. Localstorage
  2. Sessionstorage

این دو گزینه در موارد زیر با هم متفاوت هستند:

  1. یکی در حجم نگه داری
  2. دیگری در طول عمر

 اطلاعاتی که در localstorage نگه داری میشوند حتی بعد از اینکه مرورگر بسته بشود هم قابل دسترسی اند, ولی برعکس در sessionstorage به محض بسته شدن پنجره مرورگر اطلاعات از بین میروند.

 Web Storage از دو object  زیر برای ذخیره سازی داده ها استفاده میکنه :

window.localStorage : داده هارو بدون تاریخ انقضاء ذخیره میکنه .

code.sessionStorage : داده ها رو در یک session ذخیره میکنه و با بستن مرورگر داده ها حذف خواهند شد .

قبل از اینکه بخواین از web storage استفاده کنید ، مطمئن بشید که مرورگر شما از localStorage و sessionStorage پشتیبانی میکنه . برای اینکار در جاوا اسکریپت ما به این صورت web storage رو تعریف می کنیم . اگر مرورگر این دو object رو شناسایی کرد ، خوب عملیات رو انجام بده اما اگر شناسایی نکرد به کاربر پیغامی رو نمایش میده مبنی بر اینکه این مرورگر توانایی پشتیبانی از این تکنولوژی رو نداره :

  • شی localStoarge : این شی برای نگهداری اطلاعات به مدت طولانی استفاده می شود . اطلاعات ذخیره شده توسط این شی بر روی کامپیوتر کاربر قرار گرفته و با بسته شدن مرورگر و یا خاموش کردن کامپیوتر از بین نمی روند و در آینده قابل بازیابی هستند .
  • شی sessionStorage : این شی برای نگهداری اطلاعات به صورت موقت به کار رفته و در حافظه موقت کامپیوتر کاربر ذخیره می شود . با بسته شدن صفحه جاری در مرورگر و خاموش شدن کامپیوتر ، این اطلاعات نیز از بین رفته و دیگر قابل بازیابی نیستند .

شکل کلی استفاده از شی localStorage بصورت زیر است :

توضیحات
این پارامتر تعیین کتتده نام شی localStorage بوده و در سطح برنامه و برای دسترسی به آن از این نام استفاده می شود .
تعیین این پارامتر اجباری است .
name
این پارامتر نیز تعیین کننده مقدار مورد نظر برای شی localStorage است .  این مقدار ،  در واقع مقدار کوکی مورد نظرمان است .
تعیین این پارامتر اجباری است .
value

 شی sessionStorage :

این شی هماند شی localStorage می تواند اطلاعات کاربر را روی کامپیوتر و مرورگر وی ذخیره نماید ، با این تفاوت که شی sessionStorage اطلاعات را بصورت موقتی ذخیره کرده و با بسته شدن مرورگر تمام این اطلاعات از بین خواهد رفت .
 بنابراین از این شی بایستی برای ذخیره سازی اطلاعات مقطعی و اطلاعاتی که در آینده نیاز به آن نداریم استفاده کرد .  

شکل کلی به صورت زیر می باشد:

 
توضیح خاصبت
این پارامتر تعیین کتتده نام شی sessionStorage بوده و در سطح برنامه و برای دسترسی به آن از این نام استفاده می شود .
تعیین این پارامتر اجباری است .
name
این پارامتر نیز تعیین کننده مقدار مورد نظر برای شی sessionStorage است .  این مقدار ،  در واقع مقدار کوکی مورد نظرمان است .
تعیین این پارامتر اجباری است .
value

مثال تعداد کلیک های شما رو روی دکمه ذخیره می کند:

 

آموزش HTML آموزش طراحی وب

دیدگاه خود را بیان کنید