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

1、常用方式

url页面路径携带参数传递

localStorage方式传递

sessionStorage方式传递

cookie的方式传递

2、方式对比

url字节限制可以参考这一篇文章《HTTP中的URL长度限制》

其中cookie的setCookie和getCookie的JS简单实现：

/** * 设置cookie

    * @param {String} cookie_name key值

    * @param {*} value 值

    * @param {*} expireTime 时长

    */

functionsetCookie(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 

    */

functiongetCookie(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对特殊字符解密           

returnunescape(document.cookie.substring(cookie_start,cookie_end))

        }   

    }   

    //其它情况返回空   

return""

}

3、借助后端的一些方式

session存储后访问相应页面传递

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

利用cookie对象 

Cookie是服务器保存在客户端中的一小段数据信息。使用Cookie有一个前提，就是客户端浏览器允许使用Cookie并对此做出相应的设置。一般不赞成使用Cookie。

利用session对象

session对象表示特定会话session的用户数据。客户第一次访问支持session的JSP网页，服务器会创建一个session对象记录客户的信息。当客户访问同一网站的不同网页时，仍处于同一个session中。

利用request重定向，设置setAttribute

利用Ajax进行异步数据请求（得到的数据可以以json或xml格式返回，便于处理）

在用户访问网站整个生命周期中都会用到的数据用 session 来存储，例如用户名，登录状态，购物车信息；显示在网页上的信息数据大多通过  request 或 Ajax 方式获取