Browser by value

A, get way, url parameters carry

可以通过window.location.search获取url的参数。如下面的示例。

a.html

<a href="a.html?username=zhangsan"></a>

b.html

<script type="text/javascript" src="getUrlParam.js" ></script>
<script type="text/javascript" >
   var a= UrlParam.paramValues("a");
  console.log(a);
</script>

getUrlParam.js

UrlParam = function() { // url参数
  var data, index;    
  (function init() {    
    data = [];    //值，如[["1","2"],["zhangsan"],["lisi"]]
    index = {};   //键:索引，如{a:0,b:1,c:2}
    var u = window.location.search.substr(1);    
    if (u != '') {    
      var params = decodeURIComponent(u).split('&');
      for (var i = 0, len = params.length; i < len; i++) {
        if (params[i] != '') {
          var p = params[i].split("=");
          if (p.length == 1 || (p.length == 2 && p[1] == '')) {// p | p= | =
            data.push(['']);    
            index[p[0]] = data.length - 1;    
          } else if (typeof(p[0]) == 'undefined' || p[0] == '') { // =c 舍弃
            continue;
          } else if (typeof(index[p[0]]) == 'undefined') { // c=aaa    
            data.push([p[1]]);    
            index[p[0]] = data.length - 1;    
          } else {// c=aaa    
            data[index[p[0]]].push(p[1]);    
          }    
        }    
      }    
    }    
  })();    
  return {    
    // 获得参数,类似request.getParameter()    
    param : function(o) { // o: 参数名或者参数次序
      try {    
        return (typeof(o) == 'number' ? data[o][0] : data[index[o]][0]);    
      } catch (e) {    
      }    
    },    
    //获得参数组, 类似request.getParameterValues()    
    paramValues : function(o) { //  o: 参数名或者参数次序
      try {    
        return (typeof(o) == 'number' ? data[o] : data[index[o]]);    
      } catch (e) {}    
    },    
    //是否含有paramName参数
    hasParam : function(paramName) {
      return typeof(paramName) == 'string' ? typeof(index[paramName]) != 'undefined' : false;
    },    
    // 获得参数Map ,类似request.getParameterMap()    
    paramMap : function() {
      var map = {};    
      try {    
        for (var p in index) {  map[p] = data[index[p]];  }    
      } catch (e) {}    
      return map;    
    }    
  }    
}(); 

Second, through the cookie, transfer

cookie 能够存储少量数据到客户端的磁盘中，特定的网页之间是可以共享cookie的数据

a.html

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script>
    $.cookie("a","12");
</script>

b.html

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script>
var param = $.cookie("a");
    console.log(param);
</script>

Third, the traditional values ​​and between window.open window.opener

window.open 可以打开一个新的页面，在新的页面中可以通过window.opener 获取父页面的窗口对象，从而可以获取父窗口中的参数

a.html

<button id="open">打开新的页面</button>
<script>
    $('#open').click(function () {
        window.open('./b.html')
    })
</script>

b.html

<script>
    var content = window.opener.document.getElementById("open").innerHTML;
    alert(content);
</script>

Four, h5 technology, window.localStorage store data

In HTML5, the new joined a localStorage feature, this feature is mainly used to be used as a local storage, to solve the problem of shortage of storage space cookie (cookie cookie in each storage space for 4k), localStorage general browser support is 5M size, this localStorage will be different in different browsers. This method is similar to the cookie, there will be a public place data, to achieve value-passing between pages.

a.html

<input type="text" name="username" />
<input type="button" name="" value="post" onclick="set()"/>
<script>
    function set() {
        //由于是一个新的技术，你可以通过下面的代码检测你的浏览器是否支持
        if (window.localStorage) {
            //存储变量的值
            localStorage.name = document.all.username.value;
            location.href = './b.html';
        } else {
            alert("NOT SUPPORT");
        }
    }

</script>

b.html

<script>
    var value = localStorage["name"];
    alert(value);
</script>

to sum up

For different solutions, has advantages and disadvantages

1.url carry parameters

Advantages: easy value, cross-domain, which will help to share the page, no environmental restrictions.
Disadvantage: url carrying length parameter value is limited. >

2.cookie way

Advantage: any page in the homologous access, data storage period can be set freely.
Disadvantages: have length restrictions. >

3. Set the parent-child relationship between the window

Advantages: easy window.opener point value as long as the parent window, not only can access all objects accessible value, the method further access to the parent window value unlimited length....
Disadvantages: two windows to the existence of the relationship is to use window.open open windows. Not across domains. >

4.h5 technology, window.localStorage storage number

Advantages: storage space, storage space there 5M.
Disadvantages: Not all browsers support. >