I have been involved in writing a couple of apps where data is pushed back and forth regularly and we built an API object in Javascript to handle data being pulled from the server on request.
The API module requested data and took an action depending on its success status. You could build a simple API module to use if you feel that you may need to expand the type of data returning later, or just build a single AJAX call to pull the data for the drop down list.
An example of the API interface would be as such:
/**
* Parameter 1, string - Command Name for the server to interpret
* Parameter 2, object - Data that should be passed to the server (if necessary)
* Parameter 3, string - the HTTP method to use: 'GET', 'POST', 'PUT' etc.
* Parameter 4, function - the callback to fire once the response is received.
**/
api('CommandName', { key: 'value' }, 'METHOD', function(response) {
if(response.success) {
//Store data in localStorage here
}
});
As you stated above, you are using the data multiple times throughout the pages on your website. Therefore in the JavaScript you would write a check on load which determines if the data has been stored within the localStorage, and if not makes a call to the API to populate it. This would ensure that the client always has that data available. This can be done like so:
//On Load
if(!localStorage.dropdown) {
api('CommandName', { key: 'value' }, 'METHOD', function(response) {
if(response.success) {
localStorage.dropdown = response.data;
}
});
}