I'm building a web app (in React on the client-side and backed by a Rails server API) with an autocomplete/typeahead input field. I want to store the data for this field locally (on the client) because:
- I want the response when the user is typing to be instant. This is important because it is essentially a data-entry app with this process being repeated many times. This also means that the data is going to be reused again and again.
- The data is static, it doesn't change (except maybe once every 1-2 years when a new dataset comes out).
The data consists of ~2600 objects, each with a little bit of associated data. In total the generated JSON array currently works out to be about 420 KB in size.
My question is: what is the best strategy for storing this data in a reasonably persistent manner on the client side?
Should it live in its own static
jsfile, assigned to a variable, that gets loaded with the page and (hopefully) cached on subsequent visits?
Should it be sent over (at least initially) as JSON via Ajax - would that give me the same caching benefits (except with a bit more flexibility)?
What about local storage - is it recommended? Does it work in IE8? How would I make use of it in this case if so? Can I invalidate it if I have to?
Like I said, the client-side is being built in React, but I'm also using jQuery if that's relevant.
Any help or suggestions appreciated, thanks.