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

- visibility ۰ mode_comment

در این قسمت با ادامه ترفندهای پیشرفته 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

comment دیدگاه کاربران

نیاز به لاگین

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