使用localStorage制作网页的间隔时间弹出窗口的方法

       最近经常看见类似于京东，当当等APP在进入某个页面的时候会有一个弹出的广告，但是有时候又没有的，我是一个前端，认为这个东西挺酷的。可能他们大型网站做这个比较高大上，但自己也想办法给公司的微信版的商城也添加了一个这样的页面。

        期初我是想着用sessionStorage实现，但是考虑到session数据只能是短暂的存储，为了提高用户体验度，所以就使用了localstorage实现了这个功能，大概的思想是这样的：

        先使用window.location.href获取当前的页面URL地址，再获取当前的时间戳，然后判断当localstorage里的这两种键值对的值为空的时候弹出窗口，并将对应的值使用localstorage.setItem()保存在localstorage中，当下次该用户进入当前页面的时候，使用localstorage.getItem()获取时间，并和localstorage中保存的时间作比较，如果距离上次进入该网页的时间是五天以上，则使用localstorage.clear()清空localstorage中存储的数据，然后再次弹出那个层，如果少于五天，则不会弹出那个层(PS:localstorage中保存的是对象类型的值，世间做比较的时候要先转换成Number类型)。

        以下是JS源代码：

HTML代码省略，变量名和class名都是自定义的。

<script>

var demoHref="http://xxx.com/index/index.html";

var thisUrl=window.location.href;

var thisValue = localStorage.getItem("thisUrl");

var timesTamp = Date.parse(new Date());

var saveTime=localStorage.getItem("saveTime");

var numberTime=Number(saveTime);

var timeCha=timesTamp-numberTime;

var fiveDay=432000000;

if (saveTime) {

if (timeCha

if (thisUrl!=thisValue&&thisUrl!=demoHref) {

localStorage.setItem("thisUrl",thisUrl);

$(".fudaiContainer").show();

$(".fudaiBtn").click(function  () {

$(".fudaiContainer").hide();

})

}else{

$(".fudaiContainer").hide();

}

}else{

localStorage.clear();

if (thisUrl!=thisValue&&thisUrl!=demoHref) {

localStorage.setItem("thisUrl",thisUrl);

$(".fudaiContainer").show();

$(".fudaiBtn").click(function  () {

$(".fudaiContainer").hide();

})

}else{

$(".fudaiContainer").hide();

}

}

}else{

localStorage.setItem("saveTime",timesTamp);

if (thisUrl!=thisValue&&thisUrl!=demoHref) {

localStorage.setItem("thisUrl",thisUrl);

$(".fudaiContainer").show();

$(".fudaiBtn").click(function  () {

$(".fudaiContainer").hide();

})

}else{

$(".fudaiContainer").hide();

}

}

<script>