0

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?

john-jones
  • 6,711
  • 17
  • 47
  • 79
  • possible duplicate of [Calculating usage of localStorage space](http://stackoverflow.com/questions/3027142/calculating-usage-of-localstorage-space) – Peter Rasmussen Apr 03 '14 at 16:40
  • no thats about calculating how much storage space there is, im asking about how its best to deal with a full localStorage. – john-jones Apr 03 '14 at 16:41
  • My first idea is: don't use localStorage for caching. It seems like you want to cache images, there is already a good way to do that, use HTTP cache headers. – Halcyon Apr 03 '14 at 16:43
  • thanks for that info, i'll look into http caching. – john-jones Apr 03 '14 at 17:12
  • thing is that i am traveling through video files, taking snapshots of the video at a given time, pasting the resulting image onto a canvas and from there to an image. so those images never really exist when the user is making the request to the server so im not sure how http caching would tackle that. – john-jones Apr 03 '14 at 18:30

2 Answers2

1

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.

Muhammad Wasim
  • 82
  • 11
0

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.

john-jones
  • 6,711
  • 17
  • 47
  • 79