在前端开发中,一个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();
  1. 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是无法使用的。解决办法: