操屁眼的视频在线免费看,日本在线综合一区二区,久久在线观看免费视频,欧美日韩精品久久综

前端頁面之間傳值的兩種方式

時間:2022-11-10

本文章向大家介紹前端頁面之間傳值的兩種方式不同js文件之間傳值，主要內容包括 傳值、 傳值（推薦）、使用實例、應用技巧、基本知識點總結和需要注意事項，具有一定的參考價值不同js文件之間傳值，需要的朋友可以參考一下。

情景：前后端分離項目，如果一個頁面在跳轉另一個頁面的同時，想傳遞數據給另一個頁面使用，就涉及到前端頁面之間傳值的問題。

主要有兩個解決方案： 或 （推薦）

傳值

介紹：

使用：

.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>

傳值（推薦）

介紹：

使用：

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>