Home > Web Front-end > JS Tutorial > js code to implement data transfer between pages

js code to implement data transfer between pages

不言
Release: 2018-08-13 15:41:30
Original
2707 people have browsed it

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>
Copy after login

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, &#39; &#39;, -1);
};
//传递cookie
function login() {
    var name = document.getElementById("userName");
    var pass = document.getElementById("passwords");
    setCookie(&#39;userName&#39;,name.value,7)
    setCookie(&#39;password&#39;,pass.value,7);
    location.href = &#39;b.html&#39;
}
function deletecookie() {
    delCookie(&#39;userName&#39;,&#39; &#39;,-1)
}
Copy after login

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

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

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"))
}
Copy after login

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>
Copy after login

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(&#39;input&#39;)[0];
    location.href=&#39;7.获取参数.html?&#39;+&#39;txt=&#39; + encodeURI(s.value);
}
Copy after login

3. Code in b.html

<p id="box"></p>
Copy after login
var loc = location.href;
var n1 = loc.length;
var n2 = loc.indexOf(&#39;=&#39;);
var txt = decodeURI(loc.substr(n2+1,n1-n2));
var box = document.getElementById(&#39;box&#39;);
box.innerHTML = txt;
Copy after login

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 = &#39;b.html&#39;
//设置localStorage
window.localStorage.setItem(&#39;user&#39;,&#39;haha&#39;);
Copy after login

2. Files in b.html

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

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template