JS跨页面调用变量的方法
2019独角兽企业重金招聘Python工程师标准>>>
在前端开发中,一个B页面需要使用另一个页面A中的变量时,通常采用两种方式,url传参或者本地存储并获取变量的值。
使用url传参,当A页面跳转至B页面时,将变量值拼接在url后面,B页面可以使用封装的函数获取url中拼接的变量值。例如:
A页面代码:window.location.href = B.html?uid=1000;
B页面代码:
function GetRequest(){var url = window.location.search; //获取url中"?"符后的字串var theRequest = new Object();if (url.indexOf("?") != -1) {var str = url.substr(1);strs = str.split("&");for(var i = 0; i < strs.length; i ++) {theRequest[strs[i].split("=")[0]]=decodeURI(strs[i].split("=")[1]);}}return theRequest; }//调用方式 var Request = new Object(); Request = GetRequest(); var uid = Request['uid']; //获取到了url中uid的值1000另外一种方式,比上面的要好用一些 function GetQueryString(name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");var r = window.location.search.substr(1).match(reg);if (r!=null)return (r[2]);return null; }var uid= GetQueryString('uid');
使用本地存储,A页面需要将变量值存储在本地,B页面去本地读取数据,就可以使用这个变量。
当A页面与B页面之间没有直接的跳转关系时,使用url传参的方式,就不是很好用了。这种情况下,可以采用本地存储的方式。- cookie的使用在另一篇博客中有详细的介绍,附上链接:前端开发中的cookie使用总结。
localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用,除非用户手动删除,例如清除缓存数据。
localStorage使用方式如下:
A页面:// 写入数据 localStorage.setItem('uid','1000'); //将变量uid(值为1000)存储至本地
B页面:
// 读取数据 localStorage.getItem('uid'); //获取本地存储中uid的值(1000)
数据的删除:
//删除某个键值对 localStorage.removeItem('uid');//清除localStorage的所有内容 localStorage.clear();
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。
sessionStorage用法与localStorage相同,只需将localStorage换为sessionStorage即可。例如:sessionStorage.setItem(‘uid’,’1000’);
其他注意事项:
1.localStorage只支持string类型的存储,所以当我们需要把JSON存入localStorage中时,需要使用JSON.stringify(),将JSON转换为JSON字符串。
例如:var data={username:'zzyn',uid:'100000' }; var strData=JSON.stringify(data); localStorage.setItem("data",strData);
2.读取数据之后,要将JSON字符串转换为JSON对象,利用JSON.parse()方法。
var data = localStorage.getItem('data'); var dataObj = JSON.parse(data);
3.手机浏览器在无痕浏览模式或者隐私模式下,webStorage是无法使用的,需要另行处理。
亲,如果您感觉本文有用,请点个赞再走吧✌(>‿◠)!!
转载于:https://my.oschina.net/ZhenyuanLiu/blog/1836479
JS跨页面调用变量的方法相关推荐
- 两个原生JS跨页面传值的小方法
文章目录 前言 一.localStorage本地存储 二.URL传值 总结 这会不会是今天写的最简单的一篇文-? 前言 今天在学校做2020年的题,碰到一个需求:用户在这个页面选择了症状,需要在下一个 ...
- js php调用webservice,js跨域调用WebService的使用方法
这次给大家带来js跨域调用WebService的使用方法,js跨域调用WebService的注意事项有哪些,下面就是实战案例,一起来看一下. 步骤1. 在web.config中的system.web节 ...
- js跨域调用php接口,php的json格式和js跨域调用的代码
function jsontest() { var json = [{'username':'crystal','userage':'20'},{'username':'candy','userage ...
- php 跨域 json,PHP json格式和js json格式 js跨域调用实现代码
先看一个js函数 function jsontest() { var json = [{'username':'crystal','userage':'20'},{'username':'candy' ...
- 解决js跨域调用WebApi的问题
解决js跨域调用WebApi的问题 参考文章: (1)解决js跨域调用WebApi的问题 (2)https://www.cnblogs.com/qubernet/p/6396295.html 备忘一下 ...
- html word表格边框变成表格,word表格边框显示不全跨页面显示的解决方法
word表格是很多伙伴常会使用到的一款办公软件,那你晓得边框显示不全跨页面显示如何处理吗?如若不了解的话,就看看下文word表格边框显示不全跨页面显示的解决方法吧. word表格边框显示不全跨页面显示 ...
- ansible playbook 中的变量用法相关介绍(三)----set_fact模块,跨play调用变量
1.通过set_fact定义变量 set_fact是一个模块,我们可以通过set_fact模块在tasks中定义变量,先来看一个小示例,如下 [root@server4 ~]# vim set1.ym ...
- JS刷新页面的几种方法
转载自 JS刷新页面的几种方法 Javascript刷新页面的几种方法: 1 history.go(0) 2 location.reload() 3 location=location 4 loc ...
- js/iframe 子页面调用父页面方法与父页面调用子页方法
博客转载于 https://blog.csdn.net/weixin_44512123/article/details/99698419 在做项目中都会存有主页面子页面.子页面嵌套中主页面中,主页面有 ...
最新文章
- Bitdefender 服务器版安装程序官方下载
- 教授爆笑讲解超级玛丽
- namespace命名空间的理解C++
- linux SMbus错误
- [javaEE] 三层架构案例-用户模块(二)
- 信息系统项目管理师-项目风险管理考点笔记
- NOI 2015 滞后赛解题报告
- 注册中心解决了什么问题
- 树的存储结构以及实现代码
- Spring Boot Initilizr - 使用IDE或IDE插件
- 手写注解实现SpringMVC
- 计算机页面图形颠倒,电脑屏幕倒过来了如何解决
- vue异步数据 报错_VUE 异步数据传递给 component props 的问题
- Java类加载机制--类加载过程(加载)
- nyoj 题目172 小柯的图表
- 17,verilog之for循环
- dedecms 织梦配置 手机 wap 站点,并绑定二级域名
- 用户微服务用户注册功能实现
- T420win7破解3G内存限制
- 纪念我交易的至暗时刻