h5的localStorage和sessionStorage

时间:2022-12-21 15:55:36

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

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);

h5的localStorage和sessionStorage

刚开始写的时候点击下次提示就存储下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就这些。其实思路有了后就很容易写出来了,之前无法把选中跟点击我知道联系起来,思路一通很快完成了。其次细节也很重要,注重细节才能完成的最好。

h5的localStorage和sessionStorage的更多相关文章

  1. h5 的localStorage和sessionStorage存到缓存里面的值是string类型

    localStorage永久存在,不手动清除永远存在:sessionStorage 一次会话的浏览器关闭就自动清除 h5 的localStorage和sessionStorage 存到缓存里面的值都是 ...

  2. H5存储------localStorage和sessionStorage

    web现在随着计算机的高速发展,客户端干的事情越来越多了,随着事情的增多,很多东西存储就不止在服务器了,本地存储越来越强大了(大神原谅我废话了

  3. h5本地缓存(localStorage,sessionStorage)

    H5本地存储数据 localStorage,sessionStorage的区别: 相同点:  缓存数据比cookie的范围大; localStorage:关闭浏览器数据不会消失,除非手动删除数据 se ...

  4. 利用H5本地存储localStorage、sessionStorage

    最近的业务处理上,要使用cookie缓存储一下数据,公司的cookie还搞出点问题.而用户的浏览器都是利用微信的内置,普遍支持h5的本地存储.于是利用了这个... 现代浏览器普遍开始支持H5本地存储, ...

  5. H5之localStorage&comma;sessionStorage

    在以前的时候也听说过一些h5缓存技术,具体也没有去使用过,就在前两三个礼拜我用了localStorage和sessionStorage这两个存储方式, 我使用这些存储技术,也是想减少访问服务器的请求, ...

  6. 使用HTML5 Web存储的localStorage和sessionStorage方式

    localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用.sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同 ...

  7. 详解Cookie、LocalStorage、SessionStorage

    不管是笔试还是面试相信大家都会经常遇到问Cookie.LocalStorage.SessionStorage 这三个不同的,什么不说先上一波图先: 针对他们大小之分应用场景也有不同: 因为考虑到每个 ...

  8. cookie、session、localStorage、sessionStorage的区别

    cookie的机制 cookie是存储在用户本地终端上的数据.有时也用cookies,指某些网站为了辨别用户身份,进行session跟踪而存储在本地终端上的数据,通常经过加密. Cookie是服务器发 ...

  9. 似懂非懂的localStorage和sessionStorage

    一.区别 相信很多人都见过这两个关于HTML5的新名词!HTML5种的web storage包含两种存储方式:localStorage和sessionStorage,这两种方式存储的数据不会自动发给服 ...

随机推荐

  1. iOS Xcode7上真机调试

    在Xcode7上进行真机调试,不需要证书,步骤如下: 1. 2. 3. 4. 5.添加Apple ID后会显示两个Free,表示可以免费真机调试iOS应用和Mac应用,选中高亮选项,点击view de ...

  2. C&num; &equals;&equals; equals 本质理解

    using System; using System.Diagnostics; using System.Text; using System.Collections; using System.Co ...

  3. 学习总结 java 父子级

    package com.hanqi; //父类 public class Father { // public Father() // { // // } // public Father(Strin ...

  4. 【LeetCode】217 &amp&semi; 219 - Contains Duplicate &amp&semi; Contains Duplicate II

     217 - Contains Duplicate Given an array of integers, find if the array contains any duplicates. You ...

  5. java新手笔记31 集合实现类

    Person类: package com.yfs.javase; import java.util.Date; public class Person implements Comparable { ...

  6. switch case实现两个数的算术运算

    方法一: package com.liaojianya.chapter1; import java.util.Scanner; public class SwitchDemo1 { public st ...

  7. 深度优先搜索-linux上浅显易懂的例子

    上次看啊哈算法中的深度优先搜索,自己用的是linux(linux粉,windows黑,嘿嘿),字符界面,为了强化对这个的理解,就在linux上对这个例子的代码做了一点修改可以很清楚的看到整个搜索过程, ...

  8. 1-跑Faster R-CNN项目中的一些问题

    原理介绍: https://blog.csdn.net/quincuntial/article/details/79132243 我用的环境: Python        3.5.2 cpu版的ten ...

  9. springMVC容器和Spring容器

    前段时间有人问我,为什么一定要在web.xml中配置spring的listener呢? <listener> <description>spring监听器</descri ...

  10. &lbrack;aaronyang原创&rsqb; Mssql 一张表3列的sql面试题,看你sql学的怎么样

    文章已经迁移到:http://www.ayjs.net/post/99.html 文章已经迁移到:http://www.ayjs.net/post/99.html 文章已经迁移到:http://www ...