前端页面之间传值的两种方式

情景：前后端分离项目，如果一个页面在跳转另一个页面的同时，想传递数据给另一个页面使用，就涉及到前端页面之间传值的问题。

主要有两个解决方案：cookie 或 localStorage（推荐）

cookie 传值

介绍：

• 浏览器端缓存文件，容量大小受浏览器产品限制
• 前端传值，需要自己封装 js 工具类
• 可作为前端传值，但也可与后端数据交互（特有）

使用：

cookie_utils.js

//封装工具类（新建js文件，使用时引入调用）
var operator = "=";

function getCookieValue(keyStr){
    var value = null;
    var s = window.document.cookie;
    var arr = s.split("; ");
    for(var i = 0; i < arr.length; i++){
        var str = arr[i];
        var k = str.split(operator)[0];
        var v = str.split(operator)[1];
        if(k == keyStr){
            value = v;
            break;
        }
    }
    return value;
}

function setCookieValue(key,value){
    document.cookie = key+operator+value;
}

login.html

<script src="static/js/cookie_utils.js"></script>
<script type="text/javascript">
	//cookie传值
    setCookieValue("username", userInfo.username);
    setCookieValue("userimg", userInfo.userImg);
</script>

index.html

<script src="static/js/cookie_utils.js"></script>
<script type="text/javascript">
	//cookie取值
    var name = getCookieValue("username");
    var img = getCookieValue("userimg");
</script>

localStorage 传值（推荐）

介绍：

• 浏览器端缓存文件，可存储更大容量数据
• 本身封装有方法，直接调用即可，比较方便
• 不可与后端进行数据交互，前端传值比较有优势

使用：

login.html

<script type="text/javascript">
	//localStorage传值
	localStorage.setItem("user", JSON.stringify(userInfo));
</script>

index.html

<script type="text/javascript">
	//localStorage取值
    var jsonStr = localStorage.getItem("user");
    //JSON字符串转对象
    var userInfo = eval("(" + jsonStr + ")");
    //用完后可删除，不让浏览器本地长时间存储（存储的生命周期更长久）
    //localStorage.removeItem("user");  
</script>