H5本地化存储

未经允许，不得转载！

水平有限，欢迎指正、交流！！

需求是：在一个页面中弹出一个广告，在用户第一次进入时弹出，在网站中再次进入该页面不再弹出！

这里使用到的是H5的本地化sessionStorage存储。

/* 
* @Author: [YXL] <1059070187@qq.com>
* @Date:   2017-03-22 13:28:07
* @Last Modified by:   [YXL] <1059070187@qq.com>
* @Last Modified time: 2016-05-21 13:29:06
*/

;(function($){
    /**
     *  sessionStorage.getItem(key):获取指定key本地存储的值
     *  sessionStorage.setItem(key,value)：将value存储到key字段
     *  sessionStorage.removeItem(key):删除指定key本地存储的值
     *  sessionStorage.length是sessionStorage的项目数
     * @param  {[type]} ){                     localhost.Storage [description]
     * @return {[type]}     [description]
     */
        var value = '';
        value = sessionStorage.getItem("key");//获取值
        if(value !== 'none'){
            sessionStorage.setItem("key", "none");//sesstionstroage()存储标识
            setTimeout(function () {
                $(".sweet-overlay").show(100);
                $(".sweet-alert").removeClass("visible hideSweetAlert").addClass("showSweetAlert");
               }, 5000);
        }else{
            $(".sweet-alert").css({"display":"none"});
        }
        sessionStorage.setItem("key", "none");//写入
        $(".timeout img").on("click",function(){
            $(".sweet-alert").removeClass("showSweetAlert").addClass("hideSweetAlert").fadeOut(400);
            $(".sweet-overlay").fadeOut(300);
        });
        var num=9;
        function running(){
            num = num - 1;
            if(num==0){
                num = 0;
                clearInterval(settime);
                $(".sweet-alert").removeClass("showSweetAlert").addClass("hideSweetAlert").fadeOut(400);
                $(".sweet-overlay").fadeOut(300);
                return true;
            }
        }
        var settime = setInterval(function(){
            running();
        },1000);
})(jQuery);

提到 sessionStorage那就得看看localStorage了。兼容性也比较好IE8以上妥妥的。。

sessionStorage生命周期跟session一样，当用户关闭浏览器之后数据将被销毁。

locslStorage生命周期只要用户不主动清理，数据将一直保存。改储存是以key——value形式进行存储，数据为字符串形式，非字符串需要使用JSON.stringify（data）进行转换，取出数据JSON.parse（data）转换。

常用操作：

1、写入读取

localStorage.name = 'fdipzone';  
name = localStorage.name;  
  
localStorage['name'] = 'fdipzone';  
name = localStorage['name'];  
  
localStorage.setItem('name', 'fdipzone');  
name = localStorage.getItem('name'); 

2、写，读，删，清空：setItem(), getItem(), removeItem(), clear()；’

存储大小大约在5M空间。

最后一个经典COOKIE：

cookie浏览器大小大概为4K左右，比较小，存储内容也就相对少了，内容一旦超过内存大小，将自动更迭，剔除老数据，添加进新数据。在尝试做一些存储量数据不高的情况下，可以使用cookie毕竟cookie的所有浏览器都兼容。

希望对大家有点点帮助！！