两个原生JS跨页面传值的小方法

最新推荐文章于 2023-04-25 11:13:05 发布

白瑕

最新推荐文章于 2023-04-25 11:13:05 发布

阅读量3.5k

点赞数 6

分类专栏： JavaScript 文章标签： javascript js 前端

本文链接：https://blog.csdn.net/qq_52697994/article/details/119188843

版权

JavaScript 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

文章目录

前言
一、localStorage本地存储
二、URL传值
总结

这会不会是今天写的最简单的一篇文…?

前言

今天在学校做2020年的题,碰到一个需求:用户在这个页面选择了症状,需要在下一个页面显示出用户选择的项;
这,这就触及到我的知识盲区了…
我突然想到前几天写Vue用了localStorage,总算是没空着,但还是想知道会不会有更好的方法.

一、localStorage本地存储

不能用sessionStorage,sessionStorage在当前会话关闭之后会进行销毁,存储的东西在下个页面全是undefined.

//PageA
        var link = document.querySelector("a");
        var value1
        //这个value1
        /* localStorage.setItem(value1, "1");
        var localS = localStorage.getItem(value1);
        console.log(localS); */
        link.onclick = function () {
            localStorage.setItem(value1, "1");
            var localS = localStorage.getItem(value1);
        }

当时提示我setItem应该传入两个参数,我觉得一个是key一个是value的话key应该不用提前声明,然后一跑,不行,这个value1还就得声明出来,哪怕你不赋值.

//pageB
        var value1
        var localS = localStorage.getItem(value1);
        console.log(localS);

然后在B页面接收value1我就更是觉得"这个总可以直接拿来赋值进变量了吧?" 结果还是不行,还是得声明出value1才能拿到getItem()的value1.
这个方法好在在第二个页面拿到数据之后不用进行太多处理,能比较方便的使用.

二、URL传值

这个是我问了下同学他用的方法,感觉思维上更加合理一点,

<!-- pageA -->
<body>
    <a href="#">点击跳转页面</a>
    <script>
        var link = document.querySelector("a");
        var value1 = "value1";
        var value2 = "value2";
        link.onclick = function jumpPage() {
            window.open(`pageB.html?${value1}&${value2}`);
        }
    </script>
</body>

主要就是URL拼接,其他也没什么好说的:
window.open("")

目标页面路径URL:'要打开的地址 + ? + 参数1 + & + 参数2 + & + 参数3 + ...'

在终点页面使用window.location.search()方法获取地址栏传过来的参数,得到"?参数1&参数2&参数3"

可以将其赋值给一个变量准备分离出传来的值:
var receiveValue = window.location.search
不要问号:receiveValue.substr(1)

<body>
    <p>我是pageB</p>
    <script>
    //输出都是有效的,可以解注释看看;
        var valueFromPageA = window.location.search;
        //console.log('valueFromPageA: ' + valueFromPageA);
        var aftercut = valueFromPageA.substr(1);
        //console.log('aftercut: ' + aftercut);
        var aftersplit = aftercut.split('&');
        //console.log('aftersplit: ' + aftersplit + '类型: ' + typeof (aftersplit));
        var value1 = aftersplit[0];
        var value2 = aftersplit[1];
        //console.log(value1, value2);
    </script>
</body>

比较糟糕的就是对于数据处理的步骤相比较来说会多一些.

总结

这是我个人的一些理解啦,如果您发现我的不足,我很高兴您能为我指出!

)

白瑕

关注

6
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
两个原生JS跨页面传值的小方法

文章目录前言一、localStorage本地存储二、URL传值总结这会不会是今天写的最简单的一篇文…?前言今天在学校做2020年的题,碰到一个需求:用户在这个页面选择了症状,需要在下一个页面显示出用户选择的项;这,这就触及到我的知识盲区了…我突然想到前几天写Vue用了localStorage,总算是没空着,但还是想知道会不会有更好的方法.一、localStorage本地存储不能用sessionStorage,sessionStorage在当前会话关闭之后会进行销毁,存储的东西在下个页面全是
复制链接

扫一扫