这里分享一个我在实际项目中,使用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'); } } });