angularjs不同页面间controller传参方式,使用service封装sessionStorage
2016-11-05 11:38
591 查看
这里分享一个我在实际项目中,使用service封装的一个依赖sessionStorage的传参服务。
这里先说下大背景,在我们的实际开发中,登陆之后一般会存在一个token,这个token将会贯穿全场。任何的请求都会基于这个token,一旦token丢失,我们该次的请求就会失败。
ParamTransmit.setParam()方法帮助我们永久保存我们的token,使我们能方便的随时获取它,除非我们手动使它丢失。
2017-01-10又有时间更新下这个service了,上一个版本中setParam()方法帮我们固定存储了token。但是这样并不能满足我们的需求,有时我还希望他能永久存储一些其他的参数,比如:头像,用户名,用户ID等。所以这次我将它修改了下。
2017-06-12今天把方法重构了,并且改了名字“ParamsHelper”。各方面均得到很大的提升,我抽空重新将它整理下放上来,下面的方法还是2017-01-10的。
方法:
2.getParam()
参数:不接收任何参数。
用法:该方法用于获取参数,参数为我们最后一次使用setParam()存储的json对象。用例:
这里先说下大背景,在我们的实际开发中,登陆之后一般会存在一个token,这个token将会贯穿全场。任何的请求都会基于这个token,一旦token丢失,我们该次的请求就会失败。
ParamTransmit.setParam()方法帮助我们永久保存我们的token,使我们能方便的随时获取它,除非我们手动使它丢失。
2017-01-10又有时间更新下这个service了,上一个版本中setParam()方法帮我们固定存储了token。但是这样并不能满足我们的需求,有时我还希望他能永久存储一些其他的参数,比如:头像,用户名,用户ID等。所以这次我将它修改了下。
2017-06-12今天把方法重构了,并且改了名字“ParamsHelper”。各方面均得到很大的提升,我抽空重新将它整理下放上来,下面的方法还是2017-01-10的。
方法:
1.setParam({key},['param1','param2','param3'...]) 参数:参数key为json对象,后跟一个可选数组,数组中的每一项为我们希望永久存储的参数,每调用一次setParam都需指明所需参数。 用法:该方法用于存储我们指定的参数,存储成功之后将会立马返回一个新的json对象。每次调用该方法将会清空之前存储的json对象,数组中指明的参数除外。如果数组中参数的有变化,service会自动用新值进行替换。可选参数对应的值不存在时,存储也会成功,但是同时将会在控制台输出一个提示信息。用例:
varparam={ username:'admin', password:'admin' } ParamTransmit.setParam(param,['username','password','tname']); 这里将会提示:尝试永久保存tname时发现该值不存在!但是并不影响存储的其他参数。
2.getParam()
参数:不接收任何参数。
用法:该方法用于获取参数,参数为我们最后一次使用setParam()存储的json对象。用例:
varparam=ParamTransmit.getParam(); console.log(param); /* * * { * username:'admin', * password:'admin' * } * */
3.removeParam(key)
参数:参数为一个属性的‘键’。
用法:该方法用于移除已经存储的json对象中的某个属性,并返回一个新的json对象。用例:
varparam=ParamTransmit.removeParam(username); console.log(param); /* * *{ * password:'admin' * } * */
4.clearParam() 参数:不接收任何参数。 用法:该方法用于永久移除setParam()帮助我们存储的json对象。用例:
ParamTransmit.clearParam();
[b]以下为完整的service [/b]
App.factory('ParamTransmit',function(){
varsaveParam=function(param){
sessionStorage.setItem('paramSession',JSON.stringify(param));
}
varjudgeOldParam=function(oldParam,param,permanent){//处理需要永久保存的参数
if(permanent&&permanent.length!=0){
//将原始数据的属性名与值转换为数组
varparamKeyArr=[],paramValArr=[];
for(paramKeyinparam){
paramKeyArr.push(paramKey);
paramValArr.push(eval('param.'+paramKey));
}
//将paramKeyArr转换为hash对象
varhash={};
for(vari=0;i<paramKeyArr.length;i++){
hash[paramKeyArr[i]]=true;
}
for(vark=0;k<permanent.length;k++){
if(typeofhash[permanent[k]]=="undefined"){
if(eval('oldParam.'+permanent[k])){
eval('param.'+permanent[k]+'='+'oldParam.'+permanent[k]);
}else{
eval('param.'+permanent[k]+'='+null);
console.log('尝试永久保存'+permanent[k]+'时发现该值不存在!');
}
}
}
}
saveParam(param);
}
varparamJson=function(){
returnsessionStorage.paramSession?JSON.parse(sessionStorage.paramSession):{};
}
return{
setParam:function(param,permanent){
try{
varoldParam=paramJson();
}catch(err){
console.log('ParamTransmit运行成功!');
varoldParam=false;
}
judgeOldParam(oldParam,param,permanent);
returnparamJson();
},
getParam:function(){returnparamJson();},
removeParam:function(key){
varparam=paramJson();
vardelExpr='deleteparam.'+key;
eval(delExpr);
sessionStorage.setItem('paramSession',JSON.stringify(param));
returnparamJson();
},
clearParam:function(){sessionStorage.removeItem('paramSession');}
}
});
相关文章推荐
- PHP 向其它PHP页面传参的两次方式,包括传参不刷新,不使用POST GET
- 解决使用angularjs时页面因为{{ }}闪烁的两种方式ng-bind,ng-cloak
- 对页面中的某一个变量或部分代码段使用不同的的编码方式
- AngularJs页面传参的几种方式
- AngularJS页面传参的5种方式
- AngularJS—页面传参的5种方式
- 使用mui框架打开页面的几种不同方式
- Ajax使用Post方式提交到.aspx页面交互的例子
- Jsp页面的几种传参方式
- 如何在同一个页面内使用不同的超级链接,如何定义这类CSS。
- 不同页面之间传递值(使用Page.PreviousPage.FindControl)
- 在ASP.NET AJAX中,由于一个ASPX页面上只能有一个ScriptManager控件,所以在有母版页的情况下,如果需要在Master-Page和Content-Page中需要引入不同的脚本时,这就需要在Content-page中使用ScriptMa
- JSP中使用AJAX示例:分别将结果提交为STRUTS,SERVLET,WEBWORK的不同操作方式
- 如何使用 @ OutputCache 指令的 VaryByCustom 属性来缓存不同版本的页面(二)
- 基于 EGL 构建不同方式的 JSF 搜索页面
- asp.net不同页面传值的几种方式
- 新手入门:在JSP页面中的几种传参方式
- 使用RewritePath方法实现【不同路径+任意URL后缀重写到指定页面且URL地址不变】(附源码)_AX
- 使用COM方式实现不同语言之间的调用
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法(10):服务器端和客户端数据类型的自动转换:以XML方式序列化数据、小结