3

I'm building an application which fetches large amount of items with ajax requests via other application API. It returns me 6k - 30k js objects which are used multiple times across various application views (sorting, filtering etc.). I would like to avoid querying API every time for such big list so I decided to cache this data somehow.

I was thinking about various solutions:

  • saving it to localstorage,
  • using some caching library (e.g. locachejs),
  • storing in js var.

I'm not an expert so I would like to hear Your suggestions about each (or one of these) solution, about its pros and cons.

Every help will be very appreciated.

1 Answer 1

3

Unfortunately, the "right" answer here would depend on the size (complexity) of those objects.

I have found from experience that 25.000-50.000 of objects of most common complexity is the limit that keeps browser behaving within limits of usability.

There are some useful results here, that match with mine, and you can compare the sample object with yours:

http://www.ziggytech.net/technology/web-development/how-big-is-too-big-for-json/

Having that in mind, caching this data could be a viable approach with following considerations:

  • will waiting for ~4MB of data to load be justified by the increased responsiveness of the app later?

  • localstorage is limited to 5MB

If the wait is justified, I would recommend to either:

  • store data in a var (memory consumption is not that bad), if you just need to access parts of it by keys and use it directly

  • use IndexedDB, if you need to query the data, its structure is more complex or you need to manipulate it in different ways on the client side - it is a somewhat more involved approach, but libraries can help (https://github.com/aaronpowell/db.js served me well)

Best of luck!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.