title: Caching form field options - how to keep cached data current and best practices
body: <p>I have a web app (LAMP stack) that runs in the browser.  The app provides the user with the ability to input data via some forms. The user can edit existing records and create new records using these forms. The forms have many hybrid SELECT elements (using the Selectize library) which feature a list of options to choose and the ability to add a new option as desired.  The options come from previous entries to the form, as well as pre-defined values.</p>
  
  <p>Currently, each time the user opens a form, either to create a new record or edit an existing one, I call an AJAX query for each field, to retrieve a set of options for that field.  Obviously this eats a lot of data, slows down the app, and generally makes things appear to take longer than they should to load.</p>
  
  <p>I am thinking caching these values in the browser (localStorage or IndexedDB) would be a good idea, but I'm not sure the best procedure for keeping the caches warm.</p>
  
  <p>If I reload the cached data each time a form is saved, view-only speed is increased, but the same delays are introduced every time the user edits or creates a new record. (Users will be creating/editing about as frequently as viewing).  </p>
  
  <p>Also, if other users created/edited records introducing new values in these fields, these new values wouldn't appear as options in current user's form until he created/edited a record, which precludes the ability to select from those new values before saving.</p>
  
  <p>To give you an idea of the scale, there are up to about 50 fields on a single form which must be populated with different lists of options, and the number of options in a field ranges from about 5 to about 50.</p>
  
  <p>I would really appreciate guidance on how to improve the performance.  If caching is not the answer, please let me know what are considered to be best practices.  Thanks!</p>