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'); }

   }
   
});