使用localStorage进行页面间传值

原创于 2021-12-27 22:18:27 发布 · 1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

前端零零散散专栏收录该内容

27 篇文章

订阅专栏

本文介绍了如何通过JavaScript的localStorage特性，在不同的HTML页面之间传递参数。在A页面中存储数据，然后在B页面加载时读取这些数据，实现页面间的通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>