localStorage, better handling when memory fills up

Question

I am writing an application that derives a lot of image data, and doing that takes qutie some time, and during that time the user is waiting. When I have derived the data I would like to store it in case the user wants to see it again anytime soon. I have been going through some local storage methods in html5 and the most promising for my case seems to be localStorage. A downside to localstorage is that it tends to not allow that much data to be stored, 5Mb in most cases, and my thoughts are to every time i derive some data, to store it in localStorage. The problem arises when those poor little 5MB get filled up, and then I would like to delete the oldest element from the memory, bu there seems to be no easy way of doing that as everything is just stored in key-value pairs.

So I'm not quite sure how to proceed with using localStorage in this case. Is there any module or something that can make using localStorage in the manner described above easier?

Answer 1

In the end i used this module: https://gist.github.com/ragnar-johannsson/10509331. Using it the oldest values get deleted if there isnt enough memory to add a new one.

Answer 2

You can use 1) IndexedDB to store huge data but it will only work in latest browser except Opera mini. 2) OR, store your data in memory and later on to localstorage or vice versa. 3) You can always put your time tag with each key you are storing. you can traverse through keys having specific format to get the oldest key in store and you can delete it easily. 4) you can also put your time stamp in data with your image data, in this case you will not have to extract all keys but complete data objects from the store.

I would suggest you IndexedDB option to overcome your size limitaions.

Hope this will help.