前端頁面間數據傳遞經常使用的幾種方式

一、經常使用方式

• url頁面路徑攜帶參數傳遞
• localStorage方式傳遞
• sessionStorage方式傳遞
• cookie的方式傳遞

二、方式對比

url字節限制能夠參考這一篇文章《HTTP中的URL長度限制》

其中cookie的setCookie和getCookie的JS簡單實現：

/** * 設置cookie 
    * @param {String} cookie_name key值 
    * @param {*} value 值 
    * @param {*} expireTime 時長 
    */
function setCookie(cookie_name, value, expireTime){    
    //獲取當前時間    
    var exdate = new Date()    
    //設置時間    
    exdate.setTime(exdate.getDate() + expireTime)   //例：1天expireTime = 24 * 60 * 60 * 1000    
    //設置cookie，escape對特殊字符加密，對於unescape對特殊字符解密    
    document.cookie = cookie_name + "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}
/** * 取值cookie 
    * @param {String} cookie_name  
    */
function getCookie(cookie_name){    
    //判斷是否存在cookie        
    if (document.cookie.length > 0){
    //查詢cookie開始部分        
    cookie_start = document.cookie.indexOf(cookie_name + "=")        
    //若是存在        
        if (cookie_start != -1){             
            //計算結束部分            
            cookie_start = cookie_start + cookie_name.length + 1             
            cookie_end = document.cookie.indexOf(";", cookie_start)            
            //若是已是最後一個cookie值，則取cookie長度            
            if (cookie_end == -1) {                
                cookie_end = document.cookie.length             
            }            
            //獲取cookie值，unescape對特殊字符解密            
            return unescape(document.cookie.substring(cookie_start,cookie_end))        
        }     
    }    
    //其它狀況返回空    
    return ""
}複製代碼

三、藉助後端的一些方式

• session存儲後訪問相應頁面傳遞
• 數據庫存儲後訪問相應頁面傳遞