ASP.NET到HTML5 localStorage

Question

In ASP.NET (web forms), I am retrieving a set of key/value pairs from an SQL database to be used in a DropDownList. This list is quite large (can be over 2000 entries) and used multiple times over many of the pages on the website and I've been looking into ways to cache this set of data on the local client to reduce bandwidth. The list doesn't change often so having a cached copy a week or more should be fine.

I wanted to know if it was at all possible and/or practical to have this list stored using HTML5 local storage and have a DropDownList fill from the client storage. If no data if found locally, then going on to query the database for the list.

Answer 1

If you have over 2000 entries in a select box it dosnt sound all that usable anyway.

Have a look at something like Select2. Particularly the "Loading Remote Data" example.

http://ivaynberg.github.io/select2/

Answer 2

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;
        }
    });
}