Heim > Web-Frontend > js-Tutorial > Hauptteil

js-Code zur Implementierung der Datenübertragung zwischen Seiten

不言
Freigeben: 2018-08-13 15:41:30
Original
2622 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit dem js-Implementierungscode für die Datenübertragung auf der Seite. Ich hoffe, dass er für Freunde hilfreich ist.

Da mir diese Frage in früheren Interviews gestellt wurde, habe ich sie heute geklärt. Aufgrund meines begrenzten technischen Niveaus können Sie bei Fehlern gerne Kritik äußern.

Dieser Blog fasst zwei Möglichkeiten zusammen, Parameter von einer Seitenebene an eine andere zu übergeben.

1. Über die Cookie-Methode

1. Übergeben Sie den HTML-Code der Cookie-Seite, hier mit dem Namen 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>
Nach dem Login kopieren

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)
}
Nach dem Login kopieren

3. Die Seite, die Cookies akzeptiert, ist hier als b.html

<button onclick="getcookie()">获取</button>
Nach dem Login kopieren

4. Der js-Code von 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"))
}
Nach dem Login kopieren

2 🎜 >

In diesem Fall werden auch Parameter von der Seite a.html an die Seite b.html übergeben

1 Der Code von a.html

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

2 des Eingabe-Tags Der Wert wird an b.html

function jump() {
    var s = document.getElementsByTagName(&#39;input&#39;)[0];
    location.href=&#39;7.获取参数.html?&#39;+&#39;txt=&#39; + encodeURI(s.value);
}
Nach dem Login kopieren

3 übergeben. Code in b.html

<p id="box"></p>
Nach dem Login kopieren
rreee

3. Die Übergabe von Parametern über localStorage

ähnelt Cookies. Aber seien Sie vorsichtig: Um auf ein localStorage-Objekt zugreifen zu können, muss die Seite von demselben Domänennamen stammen (Subdomänennamen sind ungültig), dasselbe Protokoll verwenden und sich auf demselben Port befinden.

1. js-Datei in a.html

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;
Nach dem Login kopieren

2. Datei in .b.html

//将localStorage传递到哪个页面
location.href = &#39;b.html&#39;
//设置localStorage
window.localStorage.setItem(&#39;user&#39;,&#39;haha&#39;);
Nach dem Login kopieren
Verwandte Empfehlungen:

jQuery Was Sind die Methoden in jQuery? Häufig verwendete Methoden in jQuery (mit Code)

Detaillierte Einführung in die Verwendung von Datenobjekten in js (mit Code)

Das obige ist der detaillierte Inhalt vonjs-Code zur Implementierung der Datenübertragung zwischen Seiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!