h5的localStorage和sessionStorage

     今天做了个首页的弹窗，要求是打开时显示弹窗，然后点击关闭按钮时弹窗关闭，然后点击不再显示，之后再刷新就不会有弹窗，总结一下需求。

1、弹窗显示隐藏

这个很容易，我们可以用display：none和display:block来控制，样式的布局就不多说了，其中用到了position:fiexd;之前一直用jq实现居中，因为之前尝试了下margin:auto时没有把四个属性设置，所以一直没有成功，今天试了下成功了，果断把jq实现居中的给删除了。

<style>
.tanc{width: 90%;height: 405px;
border: 1px solid #f1f1f1;
position: fixed;
background: #ffffff;
border-radius: 15px;
overflow: hidden;
color: #666666;
font-size: 12px;
z-index:100;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.tanc_top{font-size: 15px; width: 100%;height: 50px;line-height: 50px;background: #fff5ed;text-align: center;color: #ff6c00}
.fxts{width: 100%;height: 305px;overflow-y: scroll ;color: #666666!important;font-size: 12px!important;}
.fxts p{padding: 0 20px;}
.tanc_bm{width: 100%;height: 50px;line-height: 50px; background: #f1f1f1}
.know{cursor: pointer;width: 70px;height:30px;background: #ff6c00;display:block;line-height: 30px;border-radius: 5px; text-align: center;color: #ffffff;font-size: 12px;overflow:hidden;float: right;margin-right: 25px;margin-top:11px;}
.know1{float: left;margin-left: 20px;color: #666;display:inline-block;margin-bottom: 0px;}
.know1 input{width: 20px;height: 20px;margin-right: 5px;position: relative;top: 5px;}
</style>

<div class="popup_bg" style="background: #000"></div>
            <div class="tanc" style="display: none">
                <div class="tanc_top">风险提示书</div>
                <div class="fxts">
                    <p style="margin-top: 15px">尊敬的众贷汇出借人：</p>
                    <p>为了使您更好地了解网络借贷的风险，请您认真、仔细阅读《众贷汇资金出借风险提示函》以及本网站关于资金出借、资费介绍、标的说明等操作规则，充分了解在本网站上出借资金的法律意义及相关风险，并根据自身的出借经验、出借目的、出借期限、自身资产状况等判断所选择的借款标的是否与自身的风险承受能力相当。 出借人的资金在出借过程中可能面临各种风险，包括但不限于市场风险、信用风险、利率风险、流动性风险以及战争自然灾害等不可抗力导致的出借资金损失。 </p>
                    <p>主要风险说明如下： </p>
                    <p>一、不可抗力的风险</p>
                    <p>由于战争、动乱、罢工、自然灾害等不可抗力因素的出现，可能导致出借人的出借资金受到损失。</p>
                    <p>二、政策风险</p>
                    <p>国家宏观政策、财政政策、货币政策、行业政策、地区发展政策的变动可能会对出借方执行产生不利影响，对此众贷汇平台不承担责任。</p><br/>
                    <p>三、借款方信用风险</p> <br/>
                    <p>当借款方因突发事件或其他不可预见的事件，导致短期或者长期丧失还款能力 (包括但不限于借款人收入情况、财产状况发生变化、人身出现意外、发生疾病、死亡等情况)，或者借款人的还款意愿发生变化时，</p>
                    <p>出借人的资金可能无法按时回收。如果出借人所投借款标的属于质保服务专款专用账户保障范围内的类型，则当借款人逾期还款时，出借人的资金将根据本网站公示的质保服务专款规则得到补偿；</p>
                    <p>若质保服务专款专用账户余额不足以弥补当期所有的逾期借款人的违约金额时，出借人当期应得到的回款可能延迟回收。</p> <br/>

                    <p>四、其他风险</p>
                    <p>本风险提示函的揭示事项仅为列举性质，未能详尽列明出借人所面临的全部风险和可能导致出借人资产损失的所有因素。 </p>
                    <p>出借人在出借资金前，应认真阅读并理解相关业务规则、标的说明书、网站服务协议、电子借款合同及本风险提示函的全部内容，并确信自身已做好足够的风险评估与财务安排，避免因出借资金而遭受难以承受的损失.</p>
                    <br/>
                    <div style="font-family:'微软雅黑';color: #333333;margin: 0 auto;text-align: center" >出借人声明</div>
                    <br/>
                    <p>出借资金为本人合法管理的资产，本人保证出借资金的来源及用途符合国家有关规定，承诺提供给众贷汇网站的所有信息资料均合法、真实、准确、完整，没有任何虚假陈述、重大遗漏和误导。</p>
                    <br/>
                    <p>在签署相关协议前，本人已认真阅读《众贷汇资金出借风险提示函》、资金出借相关协议等,以及关于资金出借、资费介绍、标的说明等操作规则及其他相关文件，充分了解在该网站上出借资金的法律意义及相关风险，</p>
                    <p>同意遵守上述文件内容，并愿意承担相关风险。并已就此（在需要时）获取过独立的法律咨询。 </p>
                    <br/>
                    <p>特此声明！</p>
                </div>


                <div class="tanc_bm">
                    <span class="know1"><input onclick="noAlert()"  name="xytc"  type="checkbox"/>下次不再提示</span>

                       <span class="know"  onclick="gbts()">我知道了</span>




                </div>
            </div>
<script>
function gbts(){
    $(".tanc").hide();
    $(".popup_bg").hide();
}
</script>

这个是简单的点击隐藏，这个需求十分钟搞定了。

 

2、需要点击下次刷新电脑不弹出，这里我讲一下服务端存储localStorage和sessionStorage两个h5对象。

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

 

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

• 保存数据：localStorage.setItem(key,value);
• 读取数据：localStorage.getItem(key);
• 删除单个数据：localStorage.removeItem(key);
• 删除所有数据：localStorage.clear();
• 得到某个索引的key：localStorage.key(index);

我在项目中用的是点击事件后存储一个key值，然后下次打开的时候如果有这个值就隐藏，如果没有就显示。

1、保存数据：localStorage.setItem(key,value);

2、读取数据：localStorage.getItem(key);

 

刚开始写的时候点击下次提示就存储下localstorage的key和value值，然后点击我知道了隐藏掉。

function noAlert(){
    localStorage.setItem("alertWapKey",10);

} //点击存储
if(localStorage.getItem("alertWapKey")==10){
    $(".tanc").hide();
    $(".popup_bg").hide();
}else{
    $(".tanc").show();
    $(".popup_bg").show();

}

我以为大功告成之时，测试呵呵的跟我说了句我们需要选中下次不显示之后再点击我知道了生效。我这个选中下次不再提示之后无论点不点我知道了，下次刷新都不会再弹出来，我去，强迫症患者啊。好吧我来改，于是我就整理下思路，既然需要不仅选中下次

不在提示还要点击我知道了，两者必须要有先后顺序。如何让两个有关系而且还要有先后顺序哪，于是我就写了个变量，在下次不再显示上加点击事件。

function noAlert(){
    if(alertWapkey1==1){
        alertWapkey1=0
    }else{
        alertWapkey1=1
    }

}

这样的话就是可以判断有没有选中，其实也可以用$(input).is(checked)是否选中来判断，只是我试了下竟然没成功，由于时间紧迫我就用这个了。

然后这样的话逻辑就很是清楚了，只需要点击我知道后判断是否选中，如果选中的话就给localStorage存储个key和value值，如果没有选中就删除key。

function gbts(){
$(".tanc").hide();
$(".popup_bg").hide();
if(alertWapkey1==0){
localStorage.setItem("alertWapKey",10);
}else if(alertWapkey1==1){
localStorage.removeItem("alertWapKey");
}
}

 这样的话就能实现选中之后不再弹出的效果了。

中间遇到问题：

1、先后顺序   解决直接将点击我知道后判断是否选中

2、选中取消后然后点击我知道了后，下次刷新还是不显示。  解决方法：判断是否选中，当选中的时候加key和value值，当没有选中的时候删除localStorage值，这样就很好的解决了。

sessionStorage跟localstorge的方法一样，这里就不多赘述，项目中遇到的bug就这些。其实思路有了后就很容易写出来了，之前无法把选中跟点击我知道联系起来，思路一通很快完成了。其次细节也很重要，注重细节才能完成的最好。