前言

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

一、localStorage本地存储

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

//PageAvar 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还就得声明出来,哪怕你不赋值.

//pageBvar value1var 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>

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

总结

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

两个原生JS跨页面传值的小方法相关推荐

JS跨页面调用变量的方法
2019独角兽企业重金招聘Python工程师标准>>> 在前端开发中,一个B页面需要使用另一个页面A中的变量时,通常采用两种方式,url传参或者本地存储并获取变量的值. 使用url传 ...
JS随手记——跨页面传值
目标需求: 实现将上一个页面的值传入下一个页面中. 分析: 通过修改外链JS的全局变量无法达到效果,在上个页面修改后,加载到新的页面数据却重置了,百度说可以JS再外链JS,试了也不好使(极大可能是方法 ...
【页面传值6种方式】- 【JSP 页面传值方法总结：4种】 - 【跨页面传值的几种简单方式3种】...
页面传值--最佳答案6种方式: 一. 使用QueryString变量 QueryString是一种非常简单也是使用比较多的一种传值方式,但是它将传递的值显示在浏览器的地址栏中,如果是传递一个或多个安全 ...
在java里如何跨网页传参_【页面传值6种方式】- 【JSP 页面传值方法总结：4种】 - 【跨页面传值的几种简单方式3种】...
JSP 页面间传递参数是项目中经常需要的,这应该算是 web 基本功吧. 试着将各种方式总结下来,需要时可以进行权衡利弊选择最合适的方式. 1. URL 链接后追加参数 URL 后面追加参数 resp ...
angularJs 跨控制器与跨页面传值
虽然网上概括了四种或更多的传值方式,但我现在用的顺手的就两种首先要知道AngularJs可以构建一个单页面应用程序,所以我划分为跨控制器传值和跨页面传值两类 1.跨控制器传值-- $rootS ...
【Axure交互教程】利用全局变量实现跨页面传值
作品名称:利用全局变量实现跨页面传值作品编号:Case003 软件版本:Axure9 作品类型:交互案例原型预览链接(附源文件下载链接):http://daisyaxure.com/demo/Ca ...
session在html页面跳转,session跨页面传值为空
PHP中的SESSION页面间传值的问题 a.php 代码 @session_start(); $_SESSION['username']=$row['username']a.php 代码跳转 b. ...
打砖块小游戏php程序,利用原生js实现html5打砖块小游戏（代码示例）
本篇文章给大家通过代码示例介绍一下利用原生js实现html5打砖块小游戏的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 前言 PS:本次项目中使用了大量 es6 语法,故对于 ...
原生js实现轮播图——小肉包
使用原生js实现轮播图--小肉包今天分享一个使用原生JS实现轮播图的案例,并且配上比较详细的过程讲解,欢迎小伙伴的浏览和批评指正.静态效果图如下: 核心思想将一些图片在一行中平铺,然后计算偏移量再 ...

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

文章目录

前言

一、localStorage本地存储

二、URL传值

总结

两个原生JS跨页面传值的小方法相关推荐

最新文章

热门文章