Inhaltsverzeichnis
1. Über die Cookie-Methode
1. Übergeben Sie den HTML-Code der Cookie-Seite, hier mit dem Namen a.html
2.a.html js-Code
3. Die Seite, die Cookies akzeptiert, ist hier als b.html
4. Der js-Code von b.html
2 🎜 >
<p id="box"></p>
Nach dem Login kopieren
rreee" >
<p id="box"></p>
Nach dem Login kopieren
rreee
Heim Web-Frontend js-Tutorial js-Code zur Implementierung der Datenübertragung zwischen Seiten

js-Code zur Implementierung der Datenübertragung zwischen Seiten

Aug 13, 2018 pm 03:41 PM
数据传递

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

请输入用户名和密码:
<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!

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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Chat -Befehle und wie man sie benutzt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Verwenden Sie Provide und Inject in Vue, um die Datenübertragung und Leistungsoptimierung zwischen Komponenten zu implementieren Verwenden Sie Provide und Inject in Vue, um die Datenübertragung und Leistungsoptimierung zwischen Komponenten zu implementieren Jul 17, 2023 pm 07:19 PM

Verwenden Sie Provide und Inject in Vue, um die Datenübertragung und Leistungsoptimierung zwischen Komponenten zu erreichen. In Vue ist die Datenübertragung zwischen Komponenten eine sehr häufige Anforderung. Manchmal möchten wir Daten an einem Knoten im Komponentenbaum bereitstellen und die Daten dann in seinen Nachkommenkomponenten verwenden. In diesem Fall können wir Vues Bereitstellung und Injektion verwenden, um dies zu erreichen. Zusätzlich zur Datenübertragung können Bereitstellung und Injektion auch zur Leistungsoptimierung verwendet werden, wodurch der Umfang der Requisitenübertragung reduziert und die Komponentenleistung verbessert wird. prov

Wie rufe ich mit der PHP-Sprache die API-Schnittstelle auf, um die Datenübertragung und Synchronisierung zwischen Systemen zu realisieren? Wie rufe ich mit der PHP-Sprache die API-Schnittstelle auf, um die Datenübertragung und Synchronisierung zwischen Systemen zu realisieren? Sep 05, 2023 am 11:26 AM

Wie rufe ich mit der PHP-Sprache die API-Schnittstelle auf, um die Datenübertragung und Synchronisierung zwischen Systemen zu realisieren? Bei der Entwicklung und Gestaltung moderner Systeme müssen wir häufig Daten zwischen verschiedenen Systemen übertragen und synchronisieren. Eine gängige Methode ist die Verwendung von API-Schnittstellen zur Implementierung der Kommunikation zwischen Systemen. In diesem Artikel wird erläutert, wie Sie mithilfe der PHP-Sprache die API-Schnittstelle aufrufen, um eine Datenübertragung und Synchronisierung zwischen Systemen zu erreichen. API (Application Programming Interface) ist eine programmgesteuerte Möglichkeit, verschiedene Systeme zu implementieren

So implementieren Sie die Kommunikation und Datenübertragung zwischen übergeordneten und untergeordneten Komponenten in Vue-Komponenten So implementieren Sie die Kommunikation und Datenübertragung zwischen übergeordneten und untergeordneten Komponenten in Vue-Komponenten Oct 08, 2023 pm 09:51 PM

Vue ist ein beliebtes Front-End-Entwicklungsframework, das viele praktische Funktionen und Mechanismen bietet, die uns beim Erstellen wiederverwendbarer und effizienter Komponentenanwendungen unterstützen. In Vue gehören die Kommunikation und Datenübertragung zwischen Eltern-Kind-Komponenten zu den allgemeinen Anforderungen. In diesem Artikel wird detailliert beschrieben, wie die Kommunikation und Datenübertragung zwischen übergeordneten und untergeordneten Komponenten in Vue implementiert wird, und es werden spezifische Codebeispiele bereitgestellt. In Vue kann die Kommunikation zwischen übergeordneten und untergeordneten Komponenten über Requisiten und $emit-Methoden erreicht werden. Props ist der Mechanismus, mit dem übergeordnete Komponenten Daten an untergeordnete Komponenten weitergeben können, und $emi

Vue-Komponentenkommunikation: Verwenden Sie die V-Bind-Direktive für die Datenübertragung Vue-Komponentenkommunikation: Verwenden Sie die V-Bind-Direktive für die Datenübertragung Jul 07, 2023 pm 04:46 PM

Vue-Komponentenkommunikation: Verwenden Sie die V-Bind-Anweisung für die Datenübertragung. Vue.js ist ein beliebtes Front-End-Framework, das leistungsstarke Komponentenentwicklungsfunktionen bietet. In Vue-Anwendungen ist die Komponentenkommunikation ein wichtiges Thema. Die V-Bind-Anweisung ist eine vom Vue-Framework bereitgestellte Datenübertragungsmethode. In diesem Artikel wird erläutert, wie Sie die V-Bind-Anweisung zum Übertragen von Daten zwischen Komponenten verwenden. In Vue kann die Komponentenkommunikation in zwei Situationen unterteilt werden: Eltern-Kind-Komponentenkommunikation und Geschwisterkomponentenkommunikation. Im Folgenden stellen wir diese beiden Aspekte vor:

So nutzen Sie die Daten innerhalb der Komponente und die Requisiten der Komponentenparameter, um eine Datenübertragung in Vue zu erreichen So nutzen Sie die Daten innerhalb der Komponente und die Requisiten der Komponentenparameter, um eine Datenübertragung in Vue zu erreichen Jun 11, 2023 pm 02:03 PM

Vue ist ein sehr beliebtes Front-End-Entwicklungsframework, bei dem Komponenten sehr wichtige Bausteine ​​sind. In Vue können die Daten innerhalb der Komponente und die Requisiten der Komponentenparameter gut zusammen verwendet werden, um eine Datenübertragung zu erreichen. In Vue-Komponenten sind Daten die Zustandsdaten innerhalb der Komponente. Es kann mit allen Methoden in der Komponente darauf zugegriffen und geändert werden. Um Daten innerhalb einer Komponente zu verwenden, können Sie sie wie folgt deklarieren: exportdefault{data(){

Bei der Vue-Entwicklung sind Front-End- und Back-End-Datenübertragungsprobleme aufgetreten Bei der Vue-Entwicklung sind Front-End- und Back-End-Datenübertragungsprobleme aufgetreten Oct 08, 2023 pm 01:25 PM

Front-End- und Back-End-Datenübertragungsprobleme, die bei der Vue-Entwicklung auftreten, erfordern spezifische Codebeispiele. Mit der Entwicklung der Front-End-Technologie Vue als beliebtem Front-End-Framework entscheiden sich immer mehr Entwickler für die Verwendung von Vue zur Entwicklung von Webanwendungen . Im Vue-Entwicklungsprozess ist die Übertragung von Front-End- und Back-End-Daten ein sehr wichtiges Bindeglied. In diesem Artikel werden einige häufig auftretende Front-End- und Back-End-Datenübertragungsprobleme in der Vue-Entwicklung vorgestellt und spezifische Codebeispiele zur Lösung dieser Probleme bereitgestellt. Die Front-End- und Back-End-Datenübertragungsformate sind während des Front-End- und Back-End-Datenübertragungsprozesses nicht einheitlich.

Wie verwende ich Routing in Vue, um die Datenübertragung und Statusverwaltung zwischen Seiten zu implementieren? Wie verwende ich Routing in Vue, um die Datenübertragung und Statusverwaltung zwischen Seiten zu implementieren? Jul 21, 2023 am 08:18 AM

Wie verwende ich Routing in Vue, um die Datenübertragung und Statusverwaltung zwischen Seiten zu implementieren? In Vue ist Router eines der zentralen Plug-Ins zum Wechseln zwischen Seiten. Neben Seitensprüngen kann Routing auch zur Umsetzung von Datentransfer und Statusmanagement genutzt werden. In diesem Artikel wird erläutert, wie Sie mit dem Routing-Plug-In (VueRouter) von Vue die Datenübertragung und Statusverwaltung zwischen Seiten realisieren und entsprechende Codebeispiele bereitstellen. Grundlegende Verwendung von Routing VueRouter ist das offizielle Routing-Plug-In von Vue.js

So verwenden Sie die V-Bind-Direktive zum Übergeben von Daten in Vue So verwenden Sie die V-Bind-Direktive zum Übergeben von Daten in Vue Jun 11, 2023 am 10:45 AM

Vue ist ein beliebtes JavaScript-Framework, das viele Anweisungen verwendet, um die Frontend-Entwicklung einfacher und flexibler zu machen. Unter diesen ist die V-Bind-Anweisung eine sehr wichtige Anweisung in Vue, die es uns ermöglicht, Daten dynamisch an HTML-Elemente zu binden. Die Syntax der v-bind-Direktive ist sehr einfach und kann für jedes HTML-Tag verwendet werden, zum Beispiel: &lt;imgv-bind:src="imageSrc"&gt; In diesem Beispiel bezieht sich v-bind auf

See all articles