Asp.net MVC image caching in browser

Question

In my asp.net/mvc (html 5) application, I have an "Add/Edit Product" wizard UI, which has 4 steps. In step 3, we have a upload/display image page.

Once user uploads images, I need to cache them in the browser. (So that user will not request the same image from the server until cache expires)

What are the best approaches to achieve this sort of caching? (Can I use html 5 local storage? Or using the static content caching with IIS (or webconfig) is enough?)

Answer 1

Add the following to your web.config file under the section:

<staticcontent>
  <clientcache cachecontrolmode="UseMaxAge" cachecontrolmaxage="60.00:00:00" />
</staticcontent>

This will set a 60 day cache limit on your static content. The user's web browser will be asked to store the content for the time limit you set.

Edit: Found my link that describes using the setting: http://blogs.msdn.com/b/rickandy/archive/2011/05/21/using-cdns-to-improve-web-site-performance.aspx