【4858美高梅】本土缓存localstorage使用,使用localStorage制作网页的间隔时间弹出窗口的主意

By admin in 4858美高梅 on 2019年4月28日

近期做项目蒙受贰个标题,即从“个人基本”点击进入“修改支付宝”,须求活动获得用户手提式有线电话机号怎么办?

多年来做项目蒙受2个难题,即从“个人基本”点击进入“修改支付宝”,须求活动获取用户手机号怎么办?

     
 近来时常看见类似于京东,当当等APP在进入有个别页面的时候会有一个弹出的广告,可是有时又尚未的,作者是2个前端,以为这些东西挺酷的。只怕他们大型网址做这几个比较高大上,但本人也想办法给商家的微信版的百货集团也增多了三个那样的页面。

javascript用于存款和储蓄的主意可谓是二种多种,善于利用‘存款和储蓄’能够大大的提升网址的属性,博主结合平日支付常见须求做一下总计,希望对大家有用~

修改支付宝的api不提供用户手提式有线电话机号数据,不过开掘个人基本提供,于是想透过localstorage在私有宗旨页面获得到手提式有线电话机号然后保存在地头缓存,进入修改支付宝页面后再获得出来。

修改支付宝的api不提供用户手机号数据,可是发掘个人基本提供,于是想通过localstorage在个体主题页面得到到手提式无线电话机号然后保存在本土缓存,进入修改支付宝页面后再拿走出来。

       
期初作者是想着用sessionStorage落成,可是思考到session数据只好是指日可待的积累,为了增加用户体验度,所以就动用了localstorage达成了这几个效果,大致的思辨是如此的:

 

 

 

       
先选取window.location.href获取当前的页面U索罗德L地址,再拿走当前的日子戳,然后推断当localstorage里的那三种键值对的值为空的时候弹出窗口,并将相应的值使用localstorage.setItem()保存在localstorage中,当下次该用户进入当前页面包车型客车时候,使用localstorage.getItem()获取时间,并和localstorage中保存的年月作比较,固然距离上次进来该网页的时辰是四天以上,则利用localstorage.clear()清空localstorage中积攒的数码,然后再度弹出那些层,假使个别二十八日,则不会弹出特别层(PS:localstorage中保存的是目标类型的值,尘世做相比较的时候要先转移成Number类型)。

1.cookie

仓库储存大小:   四kb左右,以25个为上限,

清理机制:  IEOpera 会清理近年来至少使用的cookieFirefox会自由清理cookie

驷马难追行使:   购物车,登入情形

缺陷:
 
       同域内http请求都会带cookie,浪费带宽

 

cookie常见指导参数

属性项 属性项介绍
name=
value
键值对,可以设置要保存的 Key/Value,注意这里的 NAME 不能和其他属性项的名字一样
Expires/
max-age
过期时间,在设置的某个时间点后该 Cookie 就会失效,如 expires=Wednesday, 09-Nov-99 23:12:40 GMT
Domain 生成该 Cookie 的域名,如 domain=”soulteary.com”
Path 该 Cookie 是在当前的哪个路径下生成的,如 path=/admin/
Secure 如果设置了这个属性,那么只会在 SSH 连接时才会回传该 Cookie
http http-only   true:cookie只能在服务器端读取和修改,比较安全

cookie安全

1经 库克ie 具备 HttpOnly 属性且不可能经过客户端脚本访问,则为 true;否则为 false。默以为 false。

ie 陆 +都支持属性 HttpOnly,该属性有助于缓和跨站点脚本威吓。

 

 左近应用:

  • 选拔原生js操作cookie

    1 document.cookie = name + ‘=’ + escape(value); //设置cookie  
    二 //设置过期时间   
    三 function setCookie(name,value)
    4 {
    伍 var Days = 30;
    陆 var exp = new Date();
    柒 exp.setTime(exp.get提姆e() + Days2460601000);
    8 document.cookie = name + “=”+ escape (value) + “;expires=” + exp.toGMTString();
    9 }
    10 //读取cookie  
    11 function getCookie(name)
    12 {
    13 var arr,reg=new RegExp(“(^| )”+name+”=([^;]*)(;|$)”); //正则相称14 if(arr=document.cookie.match(reg)){ //使用match相配,arr[0] 为相配成功的字符串,比如” test①=222二”,之后为()中每个门户十三分到的值

    15 return unescape(arr[2]);
    16 }
    17 else{
    18 return null;
    19 }
    20 }

    1 //删除cookie
    2 function delCookie(name)
    3 {
    4 var exp = new Date();
    5 exp.setTime(exp.getTime() – 1);
    6 var cval=getCookie(name);
    7 if(cval!=null){
    8 document.cookie= name + “=”+cval+”;expires=”+exp.toGMTString();
    9 }
    10 }

 

2.localstorage

 

存款和储蓄内容: 只即便能种类化成字符串的始末都能够储存,利用JSON.stringify();

积累大小:
5m

兼容性:
   ie8+

注重选用:常用于ajax请求缓存

缺陷:      壹. localstorage不被爬虫识别,所以无法用它完全代替url传參

               二.
不可能跨域共享,所以不用用来存款和储蓄业务主要音信,特别不要存款和储蓄安全新闻,(cookie能够因而window.name化解,可是localstorage无法)

 

【4858美高梅】本土缓存localstorage使用,使用localStorage制作网页的间隔时间弹出窗口的主意。 

 

        以下是JS源代码:

科学普及应用:

  • 推断localstorage已经积攒满了

    壹 try {
    二 localStorage.setItem(key, JSON.stringify({data: value, time: curTime}));
    三 } catch (e) {
    4 //假若存款和储蓄满了,就全部删掉
    伍 localStorage.clear();//全体刨除
    6 localStorage.setItem(key, JSON.stringify({data: value, time: curTime}));
    7 }

    积累满后会抛出非凡,只要捕获相当,再删除全数数据,就能够。

  JSON.stringify(localStorage).length
  可以查看当前选用了的大大小小,用伍M减一下可以得出粗略的盈余大小(不过很不正确)

 

  • 决断localstorage已过期
     (由于localstorage未有cookie的晚点调节,必要自身主宰)

    一 //封装过期调整代码
    二 function set(key, value) {
    三 var curTime = new Date().getTime();
    四 try {
    5 localStorage.setItem(key, JSON.stringify({data: value, time: curTime}));
    陆 } catch (e) {
    柒 //借使存款和储蓄满了,就满门删掉
    八 localStorage.clear();//全体去除
    玖 localStorage.setItem(key, JSON.stringify({data: value, time: curTime}));
    10 }
    1壹 }
    12 function get(key, exp) {
    一三 var data = localStorage.getItem(key);
    1四 var dataObj = JSON.parse(data);
    一5 if (new Date().getTime() – dataObj.time > exp) {
    16 localStorage.removeItem(key);//过期就解除key的值
    一7 console.log(‘讯息已过期’);
    1八 } else {
    1九 return JSON.stringify(dataObj.data);
    20 }
    二1 }

 

  • 看清浏览器是或不是帮衬localstorage

    1 if (window.localStorage) {
    2 console.log(‘This browser supports localStorage’);
    3 } else {
    4 console.log(‘This browser does NOT support localStorage’);
    5 }

 

  • 常见api

    一 localStorage.setItem(“b”, str); //设置b的值
    2 var b = localStorage.getItem(“b”); //获取b
    三 localStorage.clear();//全体去除
    四 localStorage.removeItem(key);//清除key的值

 

经简单询问用法和试验,代码如下:

经轻巧询问用法和尝试,代码如下:

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

3.sessionstorage

sessionStorage 在关闭页面后即被清空,而 localStorage
则会直接保存。其余与localstorage一样。

 

 

 

 

<script>

四.离线缓存(application cache)

兼容性:   ie 9 + 

首要行使:常用于静态能源缓存

积累大小:伍m

缺点:      由于原理上,application
cache是把manifest上的财富共同下载下来,所以manifest里的内容不宜过多,数据量不宜过大;由于manifest的解析日常以页面刷新为触发点,且更新的缓存不会即时被接纳,所以缓存的能源应以静态财富、更新频率十分的低的财富为主。其它要做好对manifest文件的管制,由于清单内文件不可访问或manifest更新不立刻变成的部分主题素材。

 

var phoneNumber = data.data.memberInfo.mobile;
//将后台数据保存在贰个变量中

var phoneNumber = data.data.memberInfo.mobile;
//将后台数据保存在一个变量中

var demoHref=””;

动用办法:

1.navigator.online  检查评定是还是不是在线

 

2.浏览器向服务端发出请求, html标签中那样写:
<html manifest=”demo.appcache” >;

如此那般浏览器就会向请求其余财富同样向服务器请求这几个名称叫test.manifest文件了。

在服务器端增添 mime-type text/cache-manifest

 

3.配置test.manifest 文件

1CACHE MANIFEST – 在此标题下列出的文书将在第三遍下载后举办缓存

二NETWO卡宴K – 在此标题下列出的文本需求与服务器的接连,且不会被缓存

3FALLBACK – 在此标题下列出的文件鲜明当页面无法访问时的回退页面(比方 40四页面)

 

履新:唯有server端的manifest文件改换,浏览器才会再一次拉取离线数据,必要页面重新刷新(一遍刷新才干博取新能源),更新是全局性的,不可能独立更新有个别文件。

1 CACHE MANIFEST
2 # versin 1.0.0      //版本,若修改,则重新拉取
3 CACHE:   
4   /theme.css   //缓存该文件
5   /main.js
6 NETWORK:      //不会被缓存的文件
7   login.jsp
8 FALLBACK:      //回退页面
9   /html/ /offline.html

 

 

 

 

 

 

 

 

 

 

 

if( window.locastorage ){

if( window.locastorage ){

localstorage.setItem( “key”,phoneNumber );

localstorage.setItem( “key”,phoneNumber );

var thisUrl=window.location.href;

}else {

}else {

var thisValue = localStorage.getItem(“thisUrl”);

cookie.write( “key”,phoneNumber );

cookie.write( “key”,phoneNumber );

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

} //if else做localstorage的异常 localstorage不扶助IE67        
//个人主题页面

} //if else做localstorage的至极 localstorage不协助IE陆柒        
//个人基本页面

var saveTime=localStorage.getItem(“saveTime”);

 

 

var numberTime=Number(saveTime);

var phoneNumber = window.localStorage? localStorage.getItem(“myPhone”):
库克ie.read(“myPhone”); //获取Key值      //修改支付宝页面

var phoneNumber = window.localStorage? localStorage.getItem(“myPhone”):
Cookie.read(“myPhone”); //获取Key值      //修改支付宝页面

var timeCha=timesTamp-numberTime;

 

 

var fiveDay=432000000;

 

 

if (saveTime) {

搞定!

搞定!

if (timeCha

 

 

4858美高梅,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>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有