H5工程师跨页面取值的几种方法

麦田上的字节

于 2021-03-01 23:41:47 发布

阅读量4.3k

点赞数 36

分类专栏：高级前端全栈教程系列文章标签：前端工程师取值跨页面 localStorage cookie

未经博主同意，禁止转载

本文链接：https://blog.youkuaiyun.com/weixin_41937552/article/details/114274322

版权

高级前端全栈教程系列专栏收录该内容

145 篇文章 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

本文介绍了H5工程师在跨页面取值时的三种方法：通过URL传值、利用localStorage或sessionStorage存储，以及使用cookie。详细阐述了每种方法的实现方式及其适用场景，对于需要进行页面间数据传递的开发者具有实践指导意义。

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

业务场景：作为H5工程师，经常需要到另一个页面去拿变量值，遇到好多次啦，这里总结一下，同等不同的页面一般不可以使用id或者类选择器定位取值，比如A页面有个id="demo",你从B页面取值，取不到，我记得上次在jsp中取到过一次，应该是和属性相关的，在js中完全行不通。这个场景是在另一个页面去设备号及任务号，在百度找了好几个博客及方法，亲测很实用，建议先收藏再看。

方法一：通过URL传值

方法二：使用localStorage或sessionStorage存储对象类型。

方法三：使用cookie保存：（使用cookie可用来跨页面传值-状态保持）

方法一：通过URL传值

A页面设置url参数

$('#goto_url').on('touchend',function () {
    var sss = "中国";
    window.location.href = encodeURI("demo2.html?name=" + sss + "&age=5000");
});

B页面获取url参数

了解本专栏

超级会员免费看

H5工程师跨页面取值的几种方法

方法一： 通过URL传值

方法一：通过URL传值