这里分享一个我在实际项目中,使用service封装的一个依赖sessionStorage的传参服务。

这里先说下大背景,在我们的实际开发中,登陆之后一般会存在一个token,这个token将会贯穿全场。任何的请求都会基于这个token,一旦token丢失,我们该次的请求就会失败。

ParamTransmit.setParam()方法帮助我们永久保存我们的token,使我们能方便的随时获取它,除非我们手动使它丢失。

2017-01-10 又有时间更新下这个service了 ,上一个版本中setParam()方法帮我们固定存储了token。但是这样并不能满足我们的需求,有时我还希望他能永久存储一些其他的参数,比如:头像,用户名,用户ID 等。所以这次我将它修改了下。

2017-06-12 今天把方法重构了,并且改了名字“ParamsHelper”。各方面均得到很大的提升,我抽空重新将它整理下放上来。

最新版 一直没有时间上传,时隔一年终于想起来了(20180809),这里是最新版

/*!
*
* ParamsHelper
*
* Author: BGONLINE.CN
* Date: 2017-06-12 16:25:12
* Last Modified by: BGONLINE
* Last Modified time: 2017-06-12 16:25:12
*
* 用法用例:
* set(object, array)
* set().get()
* set().remove()
* set().clear()
* get(string1, string2, string3...)
* remove(string1, string2, string3...)
* clear()
* clear().get()
* clear().set()
* clear().remove() *
* 注意:
* get 和 remove 后不在接受链式调用
* get() // 不传获取所有
* remove() // 不传删除所有
* clear() // 不接受参数
* get()和remove() 均返回json对象 如果没有可返回的值 则返回{}
*/ App.factory('ParamsHelper', function() { var paramJson = function() { // 返回存储的paramSession
return sessionStorage.hasOwnProperty("paramSession") ?
JSON.parse(sessionStorage.paramSession) : {};
} var saveParam = function(param) { // 保存paramSession
sessionStorage.setItem('paramSession', JSON.stringify(param));
} var repay = function(param) { // 返回给用户的json
var temp = {};
for(var i in param) {
temp[i] = param[i][0];
}
return temp;
} return {
set: function() {
var p = {
params: {}, // 临时参数
permanent: [], // 永久参数
};
// 获取用户传入的合法参数
for(var t in p) {
for(var i = 0; i < arguments.length; i++) {
if(Object.prototype.toString.call(p[t]) === Object.prototype.toString.call(arguments[i])) {
p[t] = arguments[i];
}
}
}
// 初始化参数 把所有状态设置为false 表示不永久保存
for(o in p.params) {
var temp = new Array();
temp.push(p.params[o], false);
p.params[o] = temp;
}
// 此时的数据结构是这样的
// p.params = {
// a: [1, false],
// b: [2, false],
// c: [3, false]
// }
// p.permanent = ['a', 'b', 'c'] // 获取上一次存储的paramSession
var old_param = paramJson(); if(p.permanent.length) { // 创建p.params的hash对象
var hash = {};
for(var o in p.params) {
hash[o] = true;
} // 通过hash进行判断
for(var i = 0; i < p.permanent.length; i++) {
// 如果永久参数不存在于临时参数
if(typeof hash[p.permanent[i]] == 'undefined') {
// 通过上一次存储的paramSession向p.params赋值
if(old_param[p.permanent[i]]) {
p.params[p.permanent[i]] = new Array();
p.params[p.permanent[i]][0] = old_param[p.permanent[i]][0];
p.params[p.permanent[i]][1] = true;
}else {
console.log('尝试永久保存' + p.permanent[i] + '时发现该值不存在!');
}
}else {
p.params[p.permanent[i]][1] = true;
}
} } // 初始化最终需要存储的对象
var new_params = {};
for(var i in old_param) {
if(old_param[i][1]) {
new_params[i] = old_param[i];
}
}
for(var i in p.params) {
new_params[i] = p.params[i];
} saveParam(new_params);
return this;
},
get: function() {
var res = paramJson();
var temp = {};
if(arguments.length > 0) {
for(var i = 0; i < arguments.length; i++) {
if(res[arguments[i]]) {
temp[arguments[i]] = res[arguments[i]]
}
}
return repay(temp);
}else {
return repay(res);
}
},
remove: function() {
var res = paramJson();
if(arguments.length > 0) {
for(var i = 0; i < arguments.length; i++) {
if(res[arguments[i]]) {
delete res[arguments[i]];
console.log(arguments[i] + '删除成功!');
}else {
console.log(arguments[i] + '删除失败!');
}
}
}else {
res = {};
console.log('全部删除成功!');
}
saveParam(res);
return repay(res);
},
clear: function() {
sessionStorage.removeItem('paramSession');
return this;
},
encrypt: function() { // 用户认证 每个项目可能不同
var code = '9561e4a736e89d89';
var now = Date.parse(new Date()) / 1000;
var auth = [md5('api_' + code + now), now];
// 返回一个数组 数组第一位为 auth 第二位为当前时间戳
return auth;
}
} });

下面是老版的,2017-01-10的

方法:

1.setParam({key}, ['param1', 'param2', 'param3'...])
参数: 参数key为json对象,后跟一个可选数组,数组中的每一项为我们希望永久存储的参数,每调用一次setParam都需指明所需参数。
用法: 该方法用于存储我们指定的参数,存储成功之后将会立马返回一个新的json对象。每次调用该方法将会清空之前存储的json对象,数组中指明的参数除外。 如果数组中参数的有变化,service会自动用新值进行替换。 可选参数对应的值不存在时,存储也会成功,但是同时将会在控制台输出一个提示信息。用例:
var param = {
username: 'admin',
password: 'admin'
} ParamTransmit.setParam(param, ['username', 'password', 'tname']);
这里将会提示:尝试永久保存tname时发现该值不存在!但是并不影响存储的其他参数。

2.getParam()

 参数:不接收任何参数。

用法:该方法用于获取参数,参数为我们最后一次使用setParam()存储的json对象。用例:

var param = ParamTransmit.getParam();

console.log(param);

/*
*
*  {
*    username: 'admin',
*    password: 'admin'
*  }
*
*/
3.removeParam(key)
参数: 参数为一个属性的‘键’。
用法: 该方法用于移除已经存储的json对象中的某个属性,并返回一个新的json对象。用例:
var param = ParamTransmit.removeParam(username);

console.log(param);

/*
*
* {
    
*    password: 'admin'
*  }
*
*/

4.clearParam()

参数:不接收任何参数。

用法:该方法用于永久移除setParam()帮助我们存储的json对象。用例:
 
ParamTransmit.clearParam();
以下为完整的service
App.factory('ParamTransmit', function() {

   var saveParam = function(param) {
sessionStorage.setItem('paramSession', JSON.stringify(param));
} var judgeOldParam = function(oldParam, param, permanent) { // 处理需要永久保存的参数 if(permanent && permanent.length != 0) {
// 将原始数据的属性名与值转换为数组
var paramKeyArr = [], paramValArr = [];
for(paramKey in param) {
paramKeyArr.push(paramKey);
paramValArr.push(eval('param.' + paramKey));
}
// 将paramKeyArr转换为hash对象
var hash = {};
for(var i = 0; i < paramKeyArr.length; i++) {
hash[paramKeyArr[i]] = true;
} for(var k = 0; k < permanent.length; k++) {
if(typeof hash[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);
} var paramJson = function() {
return sessionStorage.paramSession ? JSON.parse(sessionStorage.paramSession) : {};
} return { setParam: function(param, permanent) {
try {
var oldParam = paramJson();
} catch(err) {
console.log('ParamTransmit运行成功!');
var oldParam = false;
}
judgeOldParam(oldParam, param, permanent);
return paramJson();
}, getParam: function() { return paramJson(); }, removeParam: function(key) {
var param = paramJson();
var delExpr = 'delete param.' + key;
eval(delExpr);
sessionStorage.setItem('paramSession', JSON.stringify(param));
return paramJson();
}, clearParam: function() { sessionStorage.removeItem('paramSession'); } } });

 

angularjs不同页面间controller传参方式,使用service封装sessionStorage的更多相关文章

  1. 微信小程序页面跳转传参方式

    //实现跳转的A页面 jump: function () { let a = 1; let b = 2; wx.navigateTo({ url: '/page/vipOrder/vipOrder?d ...

  2. vue具体页面跳转传参方式

    1.写数据,可以使用“.”,”[]”,以及setItems(key,value);3种方式. 例如: localStorage.name = proe;//设置name为" proe &qu ...

  3. angularjs简单实现$http.post(CORS)跨域及$http.post传参方式模拟jQuery.post

    1.开启angularjs的CORS支持 .config(function($httpProvider) { // CORS post跨域配置 $httpProvider.defaults.useXD ...

  4. react中的传参方式

    react是一个SPA模式,即组件嵌套租,在一个单页面的应用中组件间的数值传递是必不可少的,主要的传参方式大致有一下几种: 1,在挂载的地方给组件传参 ReactDOM.rander(<a na ...

  5. react第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参)

    第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参) #课程目标 1.梳理react组件之间的关系 2.掌握父子传值的方法 3.掌握子父传值的方法 ...

  6. SpringMVC页面向Controller传参

    关于SpringMVC页面向Controller传参的问题,看了网上不少帖子,大多总结为以下几类: 1.直接把页面表单中相关元素的name属性对应的值作为Controller方法中的形参. 这个应该是 ...

  7. $router和$route的区别,路由跳转方式name 、 path 和传参方式params 、query的区别

    一.$router和$route的区别 $router : 是路由操作对象,只写对象$route : 路由信息对象,只读对象 例子://$router操作 路由跳转 this.$router.push ...

  8. Vue Router路由导航及传参方式

    路由导航及传参方式 一.两种导航方式 ①:声明式导航 <router-link :to="..."> ②:编程式导航 router.push(...) 二.编程式导航参 ...

  9. 小程序页面跳转传参-this和that的区别-登录流程-下拉菜单-实现画布自适应各种手机尺寸

    小程序页面跳转传参 根目录下的 app.json 文件 页面文件的路径.窗口表现.设置网络超时时间.设置多 tab { "pages": [ "pages/index/i ...

随机推荐

  1. 牛人总结python中string模块各属性以及函数的用法,果断转了,好东西

    http://blog.chinaunix.net/uid-25992400-id-3283846.html http://blog.csdn.net/xiaoxiaoniaoer1/article/ ...

  2. codeforces567E. President and Roads

    题目大意:总统要回家,会经过一些街道,每条街道都是单向的并且拥有权值.现在,为了让总统更好的回家,要对每一条街道进行操作:1)如果该街道一定在最短路上,则输出“YES”.2)如果该街道修理过后,该边所 ...

  3. C#.Net参数

    C#.Net参数 阅读目录 引言 形参和实参 命名实参 可选参数 params,数目可变参数 方法解析与重载决策 参数传递      [重难点] ref引用参数/out输出参数   参数修饰符 泛型类 ...

  4. Unable to boot device in current state: Creating

    安装完xcode6.1后,将其改名为Xcode6.1.app,再移动个位置,启动模拟器,问题来了: Unable to boot device in current state: Creating 解 ...

  5. setNeedsDisplay 和 setNeedsLayout-b

    setNeedsDisplay: Marks the receiver’s entire bounds rectangle as needing to be redrawn. drawRect: Th ...

  6. 移動電源ic的概述

    移動電源ic壹種集供電和充電功能於壹體的便攜式充電器,可以給手機等數碼設備隨時隨地充電或待機供電.壹般由鋰電芯或者幹電池作為儲電單元.區別於產品內部配置的電池,也叫外掛電池.壹般配備多種電源轉接頭, ...

  7. 设计模式(四):SIMPLE FACTORY简单工厂模式 -- 创建型模式

    1.定义 简单工厂模式又称静态工厂方法模式.重命名上就可以看出这个模式一定很简单.它存在的目的很简单:定义一个用于创建对象的接口. 2.适用场景 如果一个客户要一款宝马车,一般的做法是客户去创建一款宝 ...

  8. 【最大流】XMU 1595 机器调度

    题目链接: http://acm.xmu.edu.cn/JudgeOnline/problem.php?id=1595 题目大意: T组数据,n个任务,m个机器,对于每个任务:有一个处理时间p(表示这 ...

  9. CentOS 6.4 安装 Fcitx4.0

    一.首先安装中文支持: su root yum install "@Chinese Support" exit yum remove ibus 注销再登陆 二.安装fcitx 下载 ...

  10. 线程间同步之 semaphore(信号量)

    原文地址:http://www.cnblogs.com/yuqilin/archive/2011/10/16/2214429.html semaphore 可用于进程间同步也可用于同一个进程间的线程同 ...