Increased DB Size and delete function not working

Question

I'm new to javascript, and I'm using IndexedDB to store data on client System.To scale the speed and various other features, I'm trying to store various data from image to Document. Whenever I attempt to store data of any type, the space occupied in the local system is 4 times that of the actual file size.

Say for example. I'm storing 10 MB image file 10 times using a loop. the resulting size of DB is 400 MB instead of 100 MB. it differs with browser ofcourse. if I try to store 1 MB document 100times then the Size of DB is 472 MB instead of 100MB.

Another issue I'm facing is , whenever i delete a record or empty a ObjectStore, the Onsuccess event is triggered. and any future reference to the deleted Records shows no Data, but the Memory occupied by the DB remains same. for example: When I attempt to store records to a total of 1 GB the DB Occupies 4GB and at the end of the delete operation the IndexedDB folders still show the Size as 4GB. In Chrome it is even worse, if I try to delete or read a data then it occupies more memory than it already does. Please give me a solution.

Answer 1

I removed the "createIndex" statement inside onupgradeneeded event and that reduced the DB Size to actual size of data.

Also the delete operation which I've stated in my question is working. only thing is, the space occupied by the DB is not freed immediately after deleting the DB or Records, but carried out later when new records are inserted.

However I still don't know why the createIndex statement caused me so much trouble.