前端页面间数据传递经常使用的几种方式

一、经常使用方式

• 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存储后访问相应页面传递
• 数据库存储后访问相应页面传递