js code to implement data transfer between pages

The content of this article is about the js implementation code for data transmission on the page. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Since I have been asked this question in previous interviews, I have sorted it out today. Due to my limited technical level, if there are any mistakes, you are welcome to criticize.

This blog summarizes two ways to pass parameters from one page layer to another.

1. Through cookie method

1. Pass the html of the cookie page, here named a.html

请输入用户名和密码：
<input id="userName" type="text" />
<input id="passwords" type="password" />
<button id="btn">设置</button>
<button onclick="login()">传递cookie</button>
<button onclick="deletecookie()">删除</button>

2.a.html js code

//设置cookie
var setCookie = function (name, value, day) {
    //当设置的时间等于0时，不设置expires属性，cookie在浏览器关闭后删除
    var expires = day * 24 * 60 * 60 * 1000;
    var exp = new Date();
    exp.setTime(exp.getTime() + expires);
    document.cookie = name + "=" + value + ";expires=" + exp.toUTCString();
};
//删除cookie
var delCookie = function (name) {
    setCookie(name, ' ', -1);
};
//传递cookie
function login() {
    var name = document.getElementById("userName");
    var pass = document.getElementById("passwords");
    setCookie('userName',name.value,7)
    setCookie('password',pass.value,7);
    location.href = 'b.html'
}
function deletecookie() {
    delCookie('userName',' ',-1)
}

3. The page that accepts cookies, defined here as b.html

<button onclick="getcookie()">获取</button>

4. The js code of b.html

//获取cookie代码
var getCookie = function (name) {
    var arr;
    var reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
    if (arr = document.cookie.match(reg)){
        return arr[2];
    }
    else
        return null;
};
//点击获取按钮之后调用的函数
function getcookie() {
    console.log(getCookie("userName"));
    console.log(getCookie("password"))
}

2. The way to pass parameters through the url

This case also passes parameters from a.html to b.html page

1. The code of a.html

<input type="text" value="猜猜我是谁">
<button onclick="jump()">跳转</button>

2. Click the jump button to change the value of the input tag The value is passed to b.html

function jump() {
    var s = document.getElementsByTagName('input')[0];
    location.href='7.获取参数.html?'+'txt=' + encodeURI(s.value);
}

3. Code in b.html

<p id="box"></p>

var loc = location.href;
var n1 = loc.length;
var n2 = loc.indexOf('=');
var txt = decodeURI(loc.substr(n2+1,n1-n2));
var box = document.getElementById('box');
box.innerHTML = txt;

3. Passing parameters through localStorage

is similar to cookies. But be careful: to access a localStorage object, the page must come from the same domain name (subdomain names are invalid), use the same protocol, and be on the same port.

1. js files in a.html

//将localStorage传递到哪个页面
location.href = 'b.html'
//设置localStorage
window.localStorage.setItem('user','haha');

2. Files in b.html

<button onclick="getcookie()">获取</button>
function getcookie() {
    //获取传递过来的localStorage
    console.log(window.localStorage.getItem('user'))
}

Related recommendations:

jQuery What are the methods in jQuery? Commonly used methods in jQuery (with code)

Detailed introduction to the usage of data objects in js (with code)

The above is the detailed content of js code to implement data transfer between pages. For more information, please follow other related articles on the PHP Chinese website!