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

「爱情、让人受尽委屈。」 2022-10-01 06:59 221阅读 0赞

### 1、常用方式 ###

*  url页面路径携带参数传递
 *  localStorage方式传递
 *  sessionStorage方式传递
 *  cookie的方式传递

### 2、方式对比 ###

url字节限制可以参考这一篇文章[《HTTP中的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 ""
    }复制代码

### 3、借助后端的一些方式 ###

*  session存储后访问相应页面传递
 *  数据库存储后访问相应页面传递

转载于:https://juejin.im/post/5cd1a57ef265da0385580f46

[HTTP_URL]: https://link.juejin.im?target=http%3A%2F%2Fwww.cnblogs.com%2Flengyuhong%2Farchive%2F2012%2F02%2F04%2F2330130.html