未经允许,不得转载!
水平有限,欢迎指正、交流!!
需求是:在一个页面中弹出一个广告,在用户第一次进入时弹出,在网站中再次进入该页面不再弹出!
这里使用到的是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的所有浏览器都兼容。
希望对大家有点点帮助!!