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

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

دسته بندی موضوعات
سفارش تبلیغات

web storage در html5

Web Storage

فصل چهارم ( معرفی 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 میشه :

 

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

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

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

<<

>>

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



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

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

  • MAH

    سلام خسته نباشید
    مدت ها بود می خواستم یه مقاله به زبان ساده پیدا کنم تا این تکنیک جدید رو آموزش بده
    لطفا این آموزش ها ی مفید رو ادامه بدید
    ممنون

    • میترا رحیمی

      سلام
      خوشحالیم که براتون مفید بود . بله حتما ، انشالله به زودی پس از تکمیل بخش css ، یک پروژه ی عملی تبدیل psd به Html5 , Css3 , Jquery انتهای فصل html انجام خواهیم داد و فیلم های آموزشی هر جلسه رو انتهای اون جلسه برای دانلود قرار میدیم .
      موفق باشید .

  • فرهاد

    لطفا نحوه ایجاد قالب آژاکس رو آموزش بدید.

    منظورم اینه که چطوری یک فرم ، یا قالب و … رو به صورت کاملا آزاکس بسازیم؟

    • میترا رحیمی

      سلام دوست عزیز
      به احتمال زیاد این آموزش رو همراه با دانلود آموزش در بخش مقالات Ajax قرار میدم .
      موفق باشید .

  • محسن

    سلام
    اگه امکانش هست، آموزشی که در هر جلسه میدهید رو در انتهای آن به صورت PDF برای دانلود قرار دهید تا دوستانی که مثل من دیرتر با این سایت آشنا شدن، بتونن فایل آموزش رو دانلود کرده و خودشون رو به شما برسونن
    فکر کنم اینجوری راحت تر باشه برای ما
    ممنون از سایت خوبتون

    • میترا رحیمی

      سلام
      دوست عزیز من دقیقا متوجه تفاوت این دو وضعیت نشدم ، از سایت بصورت مستقیم آموزش رو یاد بگیرید یا فایل pdf ش رو دریافت کنید و یاد بگیرید . چه تفاوتی داره ؟ هر دو محتوا که یکی هستن .

  • Mehrdad

    سلام میشه این قابلیتو به جای کوکی استفاده کردن مثلا میشه از LocalStorage که در یک صحفه ست شده در صحفه دیگری استفاده کرد ممنون

    • حسین همت یار

      سلام ، سوالات فقط در بخش پرسش و پاسخ جواب داده خواهد شد . تشکر

وبلاگ مدرسه

مختصری درباره ما
مدرسه مجازی ایرانیان در زمینه آموزش علوم و فنون طراحی و برنامه نویسی صفحات وب اعم از آموزش زبان های برنامه نویسی و کدنویسی و همچنین آموزش طراحی گرافیک توسط نرم افزارهای گرافیکی پیکسلی و برداری فعالیت دارد .
ورود به وبلاگ

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

آخرین پرسش و پاسخ ها

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟