【澳门葡京】本土缓存localstorage使用,使用localStorage制作网页的间隔时间弹出窗口的诀窍

日前做项目遇到2个难题,即从“个人宗旨”点击进入“修改支付宝”,要求活动得到用户手提式有线电话机号如何是好?

目前做项目遭遇一个难点,即从“个人基本”点击进入“修改支付宝”,供给活动获得用户手提式无线电话机号如何做?

     
 目前不时看见类似于京东,当当等应用程式在进入某些页面包车型客车时候会有八个弹出的广告,不过有时又从不的,笔者是一个前端,以为这几个事物挺酷的。恐怕他们大型网址做那一个比较高大上,但本人也想艺术给合营社的微信版的超级市场也增加了三个那样的页面。

javascript用于存款和储蓄的艺术可谓是精彩纷呈,善于运用‘存款和储蓄’能够大大的提升网站的性质,博主结合平常开支常见须求做一下总括,希望对我们有用~

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

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

       
期初笔者是想着用sessionStorage达成,可是考虑到session数据只可以是短暂的存款和储蓄,为了狠抓用户体验度,所以就动用了localstorage落成了那些效能,大概的思辨是那般的:

 

 

 

       
先使用window.location.href获取当前的页面U瑞鹰L地址,再赢妥贴前的岁月戳,然后判别当localstorage里的那二种键值对的值为空的时候弹出窗口,并将相应的值使用localstorage.setItem()保存在localstorage中,当下次该用户进入当前页面包车型客车时候,使用localstorage.getItem()获取时间,并和localstorage中保存的光阴作相比较,如若离开上次进来该网页的时光是三日以上,则运用localstorage.clear()清空localstorage中贮存的多寡,然后再一次弹出那几个层,即使轻便八日,则不会弹出10分层(PS:localstorage中保存的是指标类型的值,世间做相比较的时候要先转移成Number类型)。

1.cookie

存款和储蓄大小:   4kb左右,以二十二个为上限,

清理机制:  IEOpera 会清理如今起码使用的cookieFirefox会随随意便清理cookie【澳门葡京】本土缓存localstorage使用,使用localStorage制作网页的间隔时间弹出窗口的诀窍。。

主要使用:   购物车,登入景况

缺陷:
 
       同域内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安全

要是 Cookie 具备 HttpOnly 属性且不可能通过客户端脚本访问,则为 true;不然为 false。默感觉 false。

ie 6 +都扶助属性 HttpOnly,该属性有助于缓和跨站点脚本要挟。

 

 广阔应用:

  • 使用原生js操作cookie

    一 document.cookie = name + ‘=’ + escape(value); //设置cookie  
    二 //设置过期时间   
    叁 function setCookie(name,value)
    肆 {
    ⑤ var Days = 30;
    6 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一=2222″,之后为()中各个门户非凡到的值

    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传參

               2.
不可能跨域共享,所以不用用来存款和储蓄业务首要音讯,特别不要存储安全音信,(cookie能够由此window.name化解,但是localstorage无法)

 

 

 

        以下是JS源代码:

左近应用:

  • 判别localstorage已经积累满了

    一 try {
    二 localStorage.setItem(key, JSON.stringify({data: value, time: curTime}));
    ③ } catch (e) {
    四 //要是存款和储蓄满了,就总体删掉
    5 localStorage.clear();//全体剔除
    陆 localStorage.setItem(key, JSON.stringify({data: value, time: cur提姆e}));
    7 }

    仓库储存满后会抛出10分,只要捕获至极,再删除全数多少,就能够。

  JSON.stringify(localStorage).length
  能够查看当前采取了的深浅,用五M减一下方可汲取粗略的盈余大小(不过很不可靠)

 

  • 推断localstorage已过期
     (由于localstorage未有cookie的逾期调控,供给和煦决定)

    1 //封装过期调控代码
    二 function set(key, value) {
    三 var cur提姆e = new Date().getTime();
    肆 try {
    5 localStorage.setItem(key, JSON.stringify({data: value, time: curTime}));
    陆 } catch (e) {
    7 //假如存款和储蓄满了,就满门删掉
    八 localStorage.clear();//全体去除
    9 localStorage.setItem(key, JSON.stringify({data: value, time: curTime}));
    拾 }
    1一 }
    12 function get(key, exp) {
    一三 var data = localStorage.getItem(key);
    14 var dataObj = JSON.parse(data);
    15 if (new Date().getTime() – dataObj.time > exp) {
    1陆 localStorage.removeItem(key);//过期就排除key的值
    壹柒 console.log(‘新闻已过期’);
    18 } 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
    3 localStorage.clear();//全部剔除
    4 localStorage.removeItem(key);//清除key的值

 

经轻便询问用法和试验,代码如下:

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

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

3.sessionstorage

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

 

 

 

 

<script>

四.离线缓存(application cache)

兼容性:   ie 9 + 

一言九鼎利用:常用来静态能源缓存

存款和储蓄大小:5m

缺点:      由于原理上,application
cache是把manifest上的财富协同下载下来,所以manifest里的内容不宜过多,数据量不宜过大;由于manifest的辨析平常以页面刷新为触发点,且更新的缓存不会立刻被选取,所以缓存的能源应以静态资源、更新频率非常的低的能源为主。别的要抓实对manifest文件的治本,由于清单内文件不可访问或manifest更新比不上时产生的部分难点。

 

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

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

var demoHref=””;

应用方法:

1.navigator.online  检验是不是在线

 

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

诸如此类浏览器就会向请求别的财富均等向服务器请求这一个名为test.manifest文件了。

在劳动器端增添 mime-type text/cache-manifest

 

3.配置test.manifest 文件

一CACHE MANIFEST – 在此标题下列出的文件就要第3次下载后开始展览缓存

贰NETWO安德拉K – 在此标题下列出的文本供给与服务器的连天,且不会被缓存

叁FALLBACK – 在此标题下列出的文件规定当页面不可能访问时的回退页面(比方 404页面)

 

更新:唯有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不帮助IE六七        
//个人基本页面

} //if else做localstorage的格外 localstorage不援救IE67        
//个人焦点页面

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

 

 

var numberTime=Number(saveTime);

var phoneNumber = window.localStorage? localStorage.getItem(“myPhone”):
Cookie.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

 

 

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>

相关文章

发表评论

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

*
*
Website