zoukankan      html  css  js  c++  java
  • angularjs不同页面间controller传参方式,使用service封装sessionStorage

    这里分享一个我在实际项目中,使用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'); }
    
       }
       
    });
    
    
    
     
  • 相关阅读:
    辅助工具链接
    参考资料链接
    oracle sql 查询前十条数据
    oracle sql 按照汉字规则排序
    oracle sql 修改timestamp数据
    eclipse闪退
    js 数组Array
    面试题:树的子结构
    面试题:二叉树中和为某一路径
    面试题:二叉搜索树的后序遍历
  • 原文地址:https://www.cnblogs.com/BGOnline/p/6032723.html
Copyright © 2011-2022 走看看