这几天在做一个查看统计信息的页面，把选择用的下拉框都做成了通过ajax请求生成。尝试使用html5的本地存储功能，对数据进行缓存，减少对服务器的请求。
用新特性前，当然要检查浏览器是否支持local storage功能了，《html5 up and running》里面介绍了怎么检测，主要就是判断这个dom元素是否存在。网上抄来的检测方法：
[cce lang="javascript"]
if(('localStorage' in window) && window['localStorage'] !== null){
//use local storage
}
[/cce]
使用起来非常方便，因为本地存储是永久性的，所以为了降低和服务器数据不统一的可能性，除了保存数据之外，我还保存了数据的修改时间，每次先取这个时间，如果超过一定间隔，就重新去服务器获取数据，然后更新这个时间。
[cce lang="javascript"]
var categoryCacheModifyTime = localStorage.getItem("categoryModifyTime");
var categoriesCache = localStorage.getItem("categories");
[/cce]
这里从本地存储中获取指定key的值，需要注意的是，value的类型是string，如果要使用，需要进行类型转换。比如categoriesCache在存入的时候是个json字符串，要变成对象需要：var categories = JSON.parse(categoriesCache)进行转换才行。
把数据放到本地存储里面：
[cce lang="javascript"]
localStorage.setItem("categories", JSON.stringify(result));
localStorage.setItem("categoryModifyTime", new Date().getTime());
[/cce]
这里也要特别注意，setItem的函数原型是void setItem(DOMString key, DOMString value);所以value也要转换成string才能保存。这里value是个json对象，所以通过JSON.stringify把json对象变成json字符串。
完整的local storage接口定义在：http://dev.w3.org/html5/webstorage/#the-storage-interface 这里。