What's the point?
There is already a well established technique called client-side caching. What does HTML5 local storage brings in this case what caching is missing?
Also, be aware of another thing. Browsers have specific policies for cache, and most browsers are quite good at managing cache well (removing only the older content, etc.). By implementing your home-made cache, you prevent the browsers from managing it correctly. Not only it can be criticized on its own, but it will also hurt you soon or later. Example: when the users of a web application are reporting bugs, often you answer by asking them to clear their cache. I'm not sure what you'll ask in your case, since clearing the cache will never resolve issues with your web app.
In response to your first edit (your second edit being off-topic):
I do aware browser cache, there will be still some header access checking
You seem to lack some understanding of browser caching. That's why it is essential to understand how it works first, before starting to implement your own home-made caching mechanism. Reinvent your own wheel only when you understand enough the existent wheels and have a good reason to not use them. See point 1 of my answer to the question "Reinventing the wheel and NOT regretting it".
When providing some data through HTTP, you can specify a few headers related to the cache:
Last-Modified specifies when the content was changed,
Expires specifies when the browser must ask to the server if the content changed.
Those two headers allow the browser to:
- Avoid downloading the content again and again. If
Last-Modified is set to the last month, and the content was already downloaded today a few hours before, there is no need to download it again.
- Avoid querying for the date where the file was last modified. If
Expires of a cache entity is May 5th, 2014, you don't have to issue any GET request neither in 2011, nor in 2012 or 2013, since you know that the cache is up-to-date.
The second one is essential for CDNs. When Google serves JQuery to a visitor of Stack Overflow or
cdn.sstatic.net serves images or stylesheets used by Stack Overflow, they do not want browsers to query for a new version every time. Instead, they are serving those files once, set the expiration date to something long enough, and that's all.
Here's for example a screenshot of what's happening when I come to Stack Overflow home page:
There are 15 files to serve. But where are all those
304 Not Modified responses? You only have three requests of content that changed. For everything else, the browser uses the cached version without making any request to any server.
eval(). But in this case, I'm pretty sure that there are better approaches which are either:
- More effective using the standard cache techniques, or
- Easier to maintain.