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传参的方式,就不是很好用了。这种情况下,可以采用本地存储的方式。

    1. cookie的使用在另一篇博客中有详细的介绍,附上链接:前端开发中的cookie使用总结。
    2. localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用,除非用户手动删除,例如清除缓存数据。

      localStorage使用方式如下: 
      A页面:

      // 写入数据
      localStorage.setItem('uid','1000');  //将变量uid(值为1000)存储至本地

      B页面:

      // 读取数据
      localStorage.getItem('uid');  //获取本地存储中uid的值(1000)

      数据的删除:

      //删除某个键值对
      localStorage.removeItem('uid');//清除localStorage的所有内容
      localStorage.clear();
    3. 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跨页面调用变量的方法相关推荐

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

    文章目录 前言 一.localStorage本地存储 二.URL传值 总结 这会不会是今天写的最简单的一篇文-? 前言 今天在学校做2020年的题,碰到一个需求:用户在这个页面选择了症状,需要在下一个 ...

  2. js php调用webservice,js跨域调用WebService的使用方法

    这次给大家带来js跨域调用WebService的使用方法,js跨域调用WebService的注意事项有哪些,下面就是实战案例,一起来看一下. 步骤1. 在web.config中的system.web节 ...

  3. js跨域调用php接口,php的json格式和js跨域调用的代码

    function jsontest() { var json = [{'username':'crystal','userage':'20'},{'username':'candy','userage ...

  4. php 跨域 json,PHP json格式和js json格式 js跨域调用实现代码

    先看一个js函数 function jsontest() { var json = [{'username':'crystal','userage':'20'},{'username':'candy' ...

  5. 解决js跨域调用WebApi的问题

    解决js跨域调用WebApi的问题 参考文章: (1)解决js跨域调用WebApi的问题 (2)https://www.cnblogs.com/qubernet/p/6396295.html 备忘一下 ...

  6. html word表格边框变成表格,word表格边框显示不全跨页面显示的解决方法

    word表格是很多伙伴常会使用到的一款办公软件,那你晓得边框显示不全跨页面显示如何处理吗?如若不了解的话,就看看下文word表格边框显示不全跨页面显示的解决方法吧. word表格边框显示不全跨页面显示 ...

  7. ansible playbook 中的变量用法相关介绍(三)----set_fact模块,跨play调用变量

    1.通过set_fact定义变量 set_fact是一个模块,我们可以通过set_fact模块在tasks中定义变量,先来看一个小示例,如下 [root@server4 ~]# vim set1.ym ...

  8. JS刷新页面的几种方法

    转载自   JS刷新页面的几种方法 Javascript刷新页面的几种方法: 1 history.go(0) 2 location.reload() 3 location=location 4 loc ...

  9. js/iframe 子页面调用父页面方法与父页面调用子页方法

    博客转载于 https://blog.csdn.net/weixin_44512123/article/details/99698419 在做项目中都会存有主页面子页面.子页面嵌套中主页面中,主页面有 ...

最新文章

  1. Bitdefender 服务器版安装程序官方下载
  2. 教授爆笑讲解超级玛丽
  3. namespace命名空间的理解C++
  4. linux SMbus错误
  5. [javaEE] 三层架构案例-用户模块(二)
  6. 信息系统项目管理师-项目风险管理考点笔记
  7. NOI 2015 滞后赛解题报告
  8. 注册中心解决了什么问题
  9. 树的存储结构以及实现代码
  10. Spring Boot Initilizr - 使用IDE或IDE插件
  11. 手写注解实现SpringMVC
  12. 计算机页面图形颠倒,电脑屏幕倒过来了如何解决
  13. vue异步数据 报错_VUE 异步数据传递给 component props 的问题
  14. Java类加载机制--类加载过程(加载)
  15. nyoj 题目172 小柯的图表
  16. 17,verilog之for循环
  17. dedecms 织梦配置 手机 wap 站点,并绑定二级域名
  18. 用户微服务用户注册功能实现
  19. T420win7破解3G内存限制
  20. 纪念我交易的至暗时刻

热门文章

  1. php获取cpu编码,PHP下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
  2. Redis常见面试题6 -- 持久化方式之AOF以及混合模式
  3. laravel构造函数和中间件执行顺序问题
  4. axios post请求
  5. laravel手动误删了迁移文件,重新生成
  6. RabbitMQ七种队列模式介绍与应用场景(通俗易懂)
  7. 2.mysql数据库如何安装_MySQL数据库如何安装
  8. 改善Python程序的91个建议(二)
  9. qemu-img创建qcow2虚拟磁盘的预分配策略
  10. 35岁前需要完成的事