illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

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



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

ترفندهای پیشرفته jQuery (قسمت 38)

0 237 ۲۱ آبان ۹۴

در این قسمت با ادامه ترفندهای پیشرفته jQuery در خدمت شما هستیم.
jquery trickshot

موضوع پنجم : استفاده از پلاگینها

ترفند 70 : چطور با indexedDB کار کنیم

مرورگرهای جدید و مدرن از پایگاه داده سمت کاربر جدید بنام indexedDB پشتیبانی میکنن. ( اطلاعات دقیق از مرورگرهایی که از این ویژگی پشتیبانی میکنن). این ابزار یک دیتابیس با performance عالی هست و شما میتونین مقدار زیادی از اطلاعات رو در اون قرار بدین و با استفاده از query اونا رو فراخوانی کنید. کارکردن با این دیتابیس یکم پیچیده و دشوار هست بخاطر callback های زیادی که داره. اما یک کتابخانه کوچک بنام db.js وجود داره که با استفاده از اون کار کردن با این دیتابیس خیلی آسونتر میشه.

در ابتدا این ابزار رو include میکنیم:

در اینجا دو دکمه قرار میدیم که وظیفه یکی از اونا لیست کردن اطلاعات هست و یکی دیگه هم یک رکورد جدید به لیست قدیمی اضافه میکنه.

در ابتدا لیستی از اطلاعات رو که میخام به دیتابیس اضافه کنیم رو تعریف میکنیم:

میبینید که یک متغیر بنام arr تعریف کردیم و سه عضو رو درونش قرار دادیم و هر عضو هم شامل اطلاعاتی هست.

حالا میتونیم از ابزار db.js استفاده کنیم. بعد از اینکه این ابزار رو include کردید میتونید از شئ db استفاده کنید. کار کردن با این شئ شبیه به اشیاء Deferred هست.

میبینید در ابتدا از متد open استفاده کردیم و رابطه رو با پایگاه داده برقرار کردیم. بعد از اونم میتونیم با استفاده از متد done کدهایی رو بعد از اتمام کدهای open اجرا کنیم. درون متد open میتونین نام پایگاه داده و table مورد نظرتون رو وارد کنید و کلیدتون رو مشخص کنید و ...

میبینید که کدهایی رو درون متد open قرار دادیم. با استفاده از ویژگی server میتونین نام دیتابیس رو مشخص کنید. درون ویژگی schema هم میتونین جداولتون رو قرار بدین. در بالا یک جدول بنام people قرار دادیم و کلید اون رو id قرار دادیم و گفتیم که autoIncrement باشه. یعنی یکی یکی اضافه بشه. با استفاده از ویژگی indexes هم کاری کردیم که فیلد email واحد و unique باشه که همزمان دو ایمیل تکراری رو در خودش جا نده.

اگر فقط قطعه کد بالا رو اجرا کنید میتونین با باز کردن Inspect Element مرورگر کروم نتیجه کار رو ببینید:

indexedDB1

حالا در متد done رویدادهایی که قصد داریم با کلیک بر روی دکمه ها اجرا بشن رو قرار میدیم:

میبینید که دو رویداد کلیک برای دکمه ها تعریف کردیم. مورد اول مربوط به لیست کردن اطلاعاتی هست که درون پایگاه داده موجود هست. رویداد دوم هم اون arr که تعریف کردیم رو به پایگاه داده اضافه میکنه. حالا اگر بر روی دکمه insert کلیک کنیم اطلاعات در جدول مورد نظر قرار میگیره و اگر inspect element رو هم مشاهده کنید اونا رو خواهید دید. با کلیک بر روی List records هم اطلاعات از جدول خونده میشه و نمایش داده میشه.

با استفاده از این ابزار میتونین بعضی از اطلاعات رو در خود مرورگر کاربر ذخیره کنید و سایتی کاربر پسندتر رو بوجود بیارید.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید

یا علی

Source

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram