使用localStorage进行页面间传值

关注

原创最新推荐文章于 2026-03-11 06:33:59 发布 1.1k 阅读 AI 写同款· GEO 优化 ›

前端页面的传值方式：Cookie和localStorage 简单介绍下Cookie和localStorage的使用方式和两者间的区别阅读详情

A页面：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面之间传值——localStorage方法</title>
</head>

<body>
    <div id="app">

        <h1>利用HTML5 Web 存储 localStorage</h1>

        <form>
            <div> 昵称：<span>{{userInfo.nickname}}</span></div>
            <div> 电话：<span>{{userInfo.mobile}}</span></div>
            <div> 喜欢的艺人：<span>{{userInfo.fav_singer}}</span></div>
        </form>
        <a href="./storageB.html">点击跳转到接收参数的页面</a>

    </div>


    <script src="../js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                userInfo: {}
            },
            methods: {
                getUserInfo() {
                    let userInfo = {
                        "id": 1,
                        "nickname": "zff",
                        "mobile": "1234567890",
                        "fav_singer": "yyqx"
                    }
                    this.userInfo = userInfo;
                    console.log(this.userInfo)
                },

                save() {
                    if (typeof (Storage) == "undefined") {
                        alert("对不起，您的浏览器不支持 web 存储。");
                    }
                    //保存数据  
                    var infoStr = JSON.stringify(this.userInfo); // 将对象转换为字符串
                    localStorage.setItem('userInfo', infoStr);
                    alert("保存成功");

                },

            },
            created: function () {
                this.getUserInfo();
                this.save();
            }
        })
    </script>
</body>

</html>

接收参数的B页面：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>接收参数页</title>
</head>

<body>
    <div id="app">

        <h1>利用HTML5 Web 存储 localStorage 接收页</h1>

        <form>
            <div> 接收到的昵称：<span>{{userInfo.nickname}}</span></div>
            <div> 接收到的电话：<span>{{userInfo.mobile}}</span></div>
            <div> 喜欢的艺人：<span>{{userInfo.fav_singer}}</span></div>
        </form>

    </div>

    <script src="../js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                userInfo: {}
            },
            methods: {
                getUserInfo() {
                    var storage = window.localStorage;
                    var json = storage.getItem('userInfo');
                    this.userInfo = JSON.parse(json)
                    console.log(this.userInfo);
                },

            },
            created: function () {
                this.getUserInfo();
            }
        })
    </script>
</body>

</html>