شرکت طراحی سایت رسارایان

  با 13 سال سابقه کار طراحی و راه اندازی وبسایت های اینترنتی و فروشگاه آنلاین

web storage در html5

web storage در html5

فصل چهارم ( معرفی HTML5 )

جلسه دوازدهم  (Web Storage درHTML5)

دوستان در این جلسه ، Web Storage در HTML5 رو به شما معرفی میکنم . Web Storage یکی از API های HTML5 هست که میتونید از این تکنولوژی کاربردی به راحتی استفاده کنید .

Web Storage

با استفاده از این API شما میتونید داده ها و اطلاعات رو در مرورگر ذخیره کنید . این API شبیه به Cookie عمل میکنه . اما امن تر و سریع تر از Cookie هست . این قابلیت میتونه داده های حجیم رو هم ذخیره کنه بدون اینکه در عملکرد صحیح سایت تاثیر منفی بذاره .

این قابلیت در مرورگرهای Internet Explorer 8+, Firefox, Opera, Chrome, Safari پشتیبانی میشه .

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

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

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

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

 

localStorage Object

این object  داده ها و اطلاعات رو بدون تاریخ انقضاء ذخیره سازی میکنه . اطلاعات با بستن مرورگر از بین نمیره و روزها ، ماه ها و سال ها در مرورگر شما باقی میمونه .

 کد بالا مقداری رو بصورت رشته در lastname ذخیره میکنه و در عنصری با آی دی result نمایش میده .

این کد رو بصورت زیر هم میتونید بنویسید :

 برای حذف مقادیر ذخیره شده هم از دستور زیر استفاده می کنیم :

به عنوان مثال کدی رو براتون قرار میدم که تعداد کلیک های شما رو روی دکمه ذخیره میکنه و تعداد کلیک هارو نمایش میده و چون توسط localStorage این عمل انجام شده ، با بستن مرورگر هم این تعداد reset نمیشه  :

 کد بالا رو در یک فایل html ذخیره کنید و اجرا کنید تا نتیجه رو ببینید . البته فایل در انتهای جلسه ضمیمه میشه و میتونید دانلود کنید .

sessionStorage Object

این object هم دقیقا مثل localStorage عمل میکنه ، با این تفاوت که در sessionStorage داده ها در یک session ذخیره میشه و با بستن مرورگر داده ها حذف میشه . نمونه کد زیر ، دقیقا مثالی هست که در بالا براتون گذاشتم ، تعداد کلیک هارو محاسبه میکنه و نمایش میده اما تفاوت این دو کد در اینه که تعداد کلیک ها با بستن مرورگر reset میشه :

 

خوب این جلسه هم به اتمام رسید . امیدوارم مفید واقع شده باشه web storage در html5

تهیه شده در مدرسه مجازی ایرانیان

دریافت فایل

رمز تمامی فایل های رمز دار : iranweblearn.com یا iroschool.com

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید

این مورد را ارزیابی کنید
(0 رای‌ها)
  • آخرین ویرایش در یکشنبه, 25 آبان 1393 ساعت 11:18
  • اندازه قلم
برای ارسال نظر وارد سایت شوید

خدمات اینترنتی رسا رایان

طراحی سایت رسا رایان با سابقه ای نزدیک به 13 سال یکی از حرفه ای ترین شرکت ها در زمینه ارائه خدمات طراحی سایت، طراحی سایت فروشگاهی، بهینه سازی سایت یا خدمات سئو در ایران می باشد. بسیار خرسند می شویم اگر طراحی وب سایت خود را به ما بسپارید.

تلفن تماس: 08644223637    تلفن همراه : 09120942434  -  09188665650   ایمیل: این ایمیل آدرس توسط سیستم ضد اسپم محافظت شده است. شما میباید جاوا اسکریپت خود را فعال نمایید