H5的本地存储功能

结合我的网站，皮肤缓存这块设计到缓存问题，就学了学HTML5的存储管理，也只是皮毛而已。

HTML5 提供了两种在客户端存储数据的新方法：

• localStorage - 没有时间限制的数据存储

• sessionStorage - 针对一个 session 的数据存储

我们都知道之前都是有cookie来存储数据，但是cookie不适合大量数据的存储，因为他们由每个对服务器的请求来传递，这使得cookie速度很慢而且效率也不高。
而在HTML5中，数据不是由每个服务器请求传递的，二是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

localStorage方法
localStorage方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

1. 存储数据
   localStorage.setItem(key,value);
2. 获取数据
   localStorage.getItem(key) //得到key的值value
3. 删除指定key为“name”的item
   localStorage.removeItem(“name”);
4. 删除localStorage所有key/value键位对items,即清空缓存
   localStorage.clear();

sessionStorage方法
sessionStorage存储的数据生命周期只保存在存储它的当前窗口或由当前窗口创建的新窗口，直到相关联的标签页关闭。
因此，sessionStorage和localStorage两者的主要差异是数据的保存时长及数据的分享方式。

1. 存储数据
   sessionStorage.setItem(key,value);
2. 获取数据
   sessionStorage.getItem(key);

移动设备的支持：

目前所有的主流浏览器都在一定程度上支持HTML5的Web Storage特性。从图3-1中可以看出，基本上所有现代浏览器都已经支持Web Storage

从图3-2可以看到．Android平台及iOS平台各自的浏览器都基本上支持Web Storage本地存储特性。

从代码的严谨性来说，建议在使用前先检查判断浏览器是否支持web storage，例如

if(window.localStorag){
    //游览器支持localStorage
}
if(window. sessionStorage){
    //浏览器支持sessionStorage
}

---

下面介绍我是如何用H5的localStorage来存储皮肤数据的。
主要代码：

/* 获取皮肤，并存入localStorage */
var oBody = document.getElementById('body1');
var storage = window.localStorage;  //创建本地存储
if(storage){    //判断浏览器是否支持localStorage
    if(storage.length>0){
        if(storage[datas.skin] == null){    //未存入当前皮肤
            storage.setItem(datas.skin,'style'+datas.skin); //存入新皮肤
            oBody.className = storage[datas.skin];  //设置body的类名
            storage[0] = 'style'+datas.skin;    //设置第一条数据为当前皮肤
        }else{  //当前皮肤已经存在
            oBody.className = storage[datas.skin];
            storage[0]= 'style'+datas.skin;
        }
    }else{  //首次存入皮肤
        storage.setItem(datas.skin,'style'+datas.skin);
        oBody.className = storage[datas.skin];
    }

}

基本思路：每一次请求来的皮肤数据都去缓存里做比较，如果没有当前的皮肤数据，那么把当前的数据存入缓存，如果有当前皮肤类型，那么把当前的这个类型设置为缓存的第一条数据，每次从缓存中取第一条皮肤数据就可以了。从缓存里取数据性能要提高很多。小伙伴们儿，你们懂了么~