معرفی
را مورد بحث قرار دادم . این مقاله پایگاه داده IndexedDB، ویژگی های آن و تفاوت های Web SQL و IndexedDB را توضیح می دهد.
درباره IndexedDB
این در مشخصات HTML 5 جدید است. این همان پایگاه داده رابطه ای نیست. با استفاده از IndexedDB می توانید تعداد زیادی از اشیاء را به صورت محلی ذخیره کنید. این یک API جاوا اسکریپت جدید است که توسط HTML 5 ارائه شده است. همانطور که گفتم، این پایگاه داده مانند یک پایگاه داده رابطه ای نیست، بنابراین مانند یک پایگاه داده رابطه ای جدول، ردیف و ستون ندارد.
در یک پایگاه داده رابطه ای، برای ذخیره داده ها یک پرس و جو پایگاه داده می نویسیم، مانند:
درج در <table_name>([column_1], [column_2]......[column_n]) مقادیر ([val_1],[val_2],.....,[val_n])
همانطور که برای انتخاب، به روز رسانی و حذف، پرس و جوهای مختلفی داریم که در پایگاه داده وب SQL نیز استفاده کرده ایم . اما همانطور که گفتم یک IndexedDB اشیاء را ذخیره می کند. بنابراین indexedDB روش متفاوتی برای ذخیره و ایجاد اشیا دارد. در این ابتدا یک شی برای ذخیره یک نوع داده ایجاد می کنید. به سادگی گفته شد، ما اشیاء جاوا اسکریپت را ذخیره می کنیم. اشیاء ممکن است یک مقدار ساده (مانند رشته، تاریخ و غیره) یا اشیاء سلسله مراتبی (مانند شی یا آرایه های جاوا اسکریپت) داشته باشند. هر شی از یک کلید با مقدار متناظر خود تشکیل شده است و هر شی مجموعه ای از ایندکس ها را ذخیره می کند که باعث می شود پرس و جو کارآمد باشد و تکرار می تواند در بین اشیا سریع باشد. در یک IndexedDB پرس و جو با یک شاخص جایگزین می شود و IndexedDB مکان نما را تولید می کند تا از آن برای تکرار در مجموعه نتایج استفاده شود.
IndexedDB API از طریق شی window.indexedDB در معرض دید قرار می گیرد . هنگامی که روی IndexedDB کار می کنید، برای تعیین اینکه آیا مرورگر از IndexedDB پشتیبانی می کند یا خیر، باید همیشه از خطوط کد زیر استفاده کنید:
- if (!window.indexedDB) {
- window.alert("Your browser doesn't support IndexedDB. ");
- }
برای بررسی در مرورگرهای مختلف نیز می توانید از این استفاده کنید:
- var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
- if(!indexedDB){
- alert("Your browser doesn't support IndexedDB ");
- }
ایجاد و باز کردن پایگاه داده IndexedDB
اگر بخواهیم روی هر پایگاه داده ای کار کنیم، اولین قدم این است که یک پایگاه داده ایجاد کنیم و سپس یک شی اتصال ایجاد کنیم تا پایگاه داده باز شود.
قبل از ایجاد پایگاه داده می خواهم در مورد دو حالت API IndexedDB به شما بگویم.
- حالت همزمان: این حالت برای استفاده فقط در ارتباط با کارگران وب ایجاد شده است. اما اکثر مرورگرها در حال حاضر از حالت همزمان پشتیبانی نمی کنند.
- حالت ناهمزمان: با استفاده از این حالت، ما از مزایای عملیات غیر مسدود کننده برخوردار می شویم، بنابراین اگر حجم زیادی داده برای ذخیره دارید و روی یک دستگاه کم مصرف با حافظه و I/O زیاد هستید، هرگز دوست نخواهید داشت. که برنامه وب شما هنگام ذخیره داده ها از کار افتاده است. این یک مفهوم جدید در برنامه های کاربردی وب نیست اما یک مفهوم بسیار خوب است.
اکنون نحوه ایجاد و باز کردن پایگاه داده IndexedDB: با فراخوانی ناهمزمان تابع باز IndexedDB API، می توانید یک شی برای پایگاه داده ایجاد کنید. اگر پایگاه داده وجود نداشته باشد، ابتدا ایجاد می شود و سپس شیء آن پایگاه داده ایجاد می شود.
- var dbOpenRequest = indexedDB.open([Database_Name],[Version]);
تابع Open دارای 2 پارامتر زیر است:
- نام پایگاه داده : این پارامتر به عنوان نام پایگاه داده ای که می خواهید باز کنید استفاده می شود. این یک پارامتر مورد نیاز است. نوع داده آن رشته ای است.
- Version: این پارامتر نسخه پایگاه داده را مشخص می کند. این پارامتر یک پارامتر اختیاری است. نوع داده آن یک عدد طولانی بدون علامت است.
تابع Open یک شی IDBRequest را برمی گرداند که رویدادها را برای نشان دادن نتیجه درخواست فعال می کند. این یک شی است که می توانید از آن برای شلیک رویدادهای onsuccess و onerror استفاده کنید.
مثال زیر نحوه ایجاد یک پایگاه داده یا شیء آن را توضیح می دهد.
- <!DOCTYPE html>
- <html>
- <body>
- <script>
- var Database_Name = "MyDatabase";
- var dbObj;
- var request = indexedDB.open(Database_Name)
- request.onsuccess = function (e) {
- document.getElementById("result").innerHTML = "Database Opened :)";
- dbObj = request.result;
- }
- request.onerror = function (e) {
- console.log("Error:" + e.target.errorCode)
- document.getElementById("result").innerHTML = "Error! The Database connection not opened. Please See The Log";
- }
- </script>
- <P id="result"></P>
- </body>
- </html>
خروجی
هنگامی که این کد در یک مرورگر اجرا می شود سپس
اگر می خواهید ببینید که آیا پایگاه داده ایجاد شده است یا خیر، ابزار توسعه دهنده را باز کنید و خروجی به این شکل خواهد بود (در کروم)
ایجاد یک Object Store در IndexedDB
IndexedDB می تواند یک یا چند شی استور را در خود جای دهد. objectStores دوباره شبیه یک جدول در یک پایگاه داده رابطهای است، اما مانند یک پایگاه داده رابطهای نیست، بسیار متفاوت است. آنها دارای سوابق کلید/مقدار هستند و می توانند مسیرهای کلیدی، مولدهای کلیدی و شاخص ها را داشته باشند. با استفاده از تابع createObjectStore می توانید یک شی استور ایجاد کنید. تابع createObjectStore پارامترهای زیر را می گیرد:
- Name: نام ذخیره شیئی که قرار است ایجاد شود. نوع داده آن DOMString است.
- پارامترهای اختیاری: این پارامتر اختیاری می تواند هر نوع مقداری را در خود جای دهد. این پارامتر می تواند یک یا هر دو ویژگی زیر را داشته باشد:
1. keyPath: یک مقدار DOMString که مسیر کلید را برای فروشگاه شی مشخص می کند.
2. autoIncrement: یک مقدار بولی نشان می دهد که آیا مقدار کلید به طور خودکار با اضافه شدن یک رکورد به فروشگاه شیء افزایش می یابد یا خیر.
فروشگاههای آبجکت نیز دارای شاخصهایی هستند که بعداً هنگام بازیابی دادهها از IndexedDB استفاده میشوند. با استفاده از تابع CreateIndex می توانید ایندکس ها را در فروشگاه شی ایجاد کنید. CreativeIndex پارامترهای زیر را می گیرد
:
- نام: نام نمایه. نوع داده آن یک رشته است.
- KeyPath: نام فیلدی که باید نمایه شود. نوع داده آن می تواند هر کدام باشد.
- پارامترهای اختیاری: نوع آن یک شی است. پارامترهای اختیاری می توانند یک یا هر دو ویژگی زیر را داشته باشند:
1. Unique: نوع آن Boolean است و تصمیم می گیرد که آیا شاخص اجازه مقادیر تکراری را بدهد یا خیر. اگر مقدار مشخصه درست باشد ، مقدار تکراری مجاز نیست. اگر مقدار مشخصه نادرست باشد ، مقادیر تکراری مجاز هستند. به طور پیش فرض مقدار آن false است.
2. MultiEntry: یک مقدار بولی که نتایج را زمانی که چندین ردیف در شیء با مقادیر کلیدی منفرد مطابقت دارند، تعیین می کند. شیء به دست آمده یک آرایه در هنگام وقوع است. اگر مقدار آن درست باشد، آرایه به دست آمده می تواند تنها شامل یک آیتم باشد. کلید آیتم حاوی آرایه ای از مقادیر منطبق است. وقتی این پارامتر false باشد (پیشفرض)، آرایه نتیجه شامل یک آیتم برای هر آیتم است که با مقدار کلید مطابقت دارد. (طبق MSDN.)
- <!DOCTYPE html>
- <html>
- <body>
- <script>
- //Data which we want to store inside the database.
- var friends_Data = [
- { Name: "Sourabh Somani", Email: "sourabh_somani2010@hotmail.com", Location: "Chittorgarh" },
- { Name: "Shaili Dashora", Email: "shailidashora@hotmail.com", Location: "Chittorgarh" },
- { Name: "Divya Sharma", Email: "divyasharma@hotmail.com", Location: "Chittorgarh" },
- { Name: "Mahesh Chand", Email: "maheshchand@gmail.com", Location: "Philadelphia, Pennsylvania" },
- { Name: "Dinesh Beniwal", Email: "dinesh@gmail.com", Location: "Delhi" }
- ];
- function initDB() {
- var Database_Name = "FriendsDB";
- var DB_Version="1";
- var dbObj;
- var request = indexedDB.open(Database_Name,DB_Version)
- request.onsuccess = function (e) {
- document.getElementById("result").innerHTML = "Database Opened :)";
- dbObj = request.result;
- }
- request.onerror = function (e) {
- console.log("Error:" + e.target.errorCode)
- document.getElementById("result").innerHTML = "Error! The Database connection not opened. Please See The Log";
- }
- //the onupgradeneeded event is fire when a database is opened with a new version number
- request.onupgradeneeded = function (e) {
- //creating Object Store
- var objectStore = e.currentTarget.result.createObjectStore("MyObjectStore", { keyPath: "id", autoIncrement: true });
- //creating Indexes
- objectStore.createIndex("Name", "Name", { unique: false });
- objectStore.createIndex("Email", "Email", { unique: true });
- objectStore.createIndex("Location", "Location", { unique: false });
- //To store the Data
- for (i in friends_Data) {
- objectStore.add(friends_Data[i]);
- }
- };
- }
- </script>
- <button id="btnCreateStore" onclick="initDB()">Create Store</button>
- <P id="result"></P>
- </body>
- </html>
خروجی
- در ابتدا وقتی صفحه بارگذاری می شود
- پس از کلیک بر روی دکمه Create Store
اگر می خواهید ببینید که آیا داده ها ذخیره شده اند یا نه، ابزار توسعه دهنده را باز کنید، سپس (در کروم) به منبع بروید و سپس تب IndexedDB را باز کنید.
خروجی ذخیره شده من به شرح زیر است: