<p id="box"></p>
js-Code zur Implementierung der Datenübertragung zwischen Seiten
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>
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. Die Seite, die Cookies akzeptiert, ist hier als b.html
<button onclick="getcookie()">获取</button>
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")) }
2 🎜 >
In diesem Fall werden auch Parameter von der Seite a.html an die Seite b.html übergeben1 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<input type="text" value="猜猜我是谁"> <button onclick="jump()">跳转</button>
function jump() {
var s = document.getElementsByTagName('input')[0];
location.href='7.获取参数.html?'+'txt=' + encodeURI(s.value);
}
Nach dem Login kopieren
3 übergeben. Code in b.htmlfunction jump() { var s = document.getElementsByTagName('input')[0]; location.href='7.获取参数.html?'+'txt=' + encodeURI(s.value); }
<p id="box"></p>
Nach dem Login kopierenrreee
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 <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;
Nach dem Login kopieren
2. Datei in .b.html 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;
//将localStorage传递到哪个页面
location.href = 'b.html'
//设置localStorage
window.localStorage.setItem('user','haha');
Nach dem Login kopieren Verwandte Empfehlungen:
//将localStorage传递到哪个页面 location.href = 'b.html' //设置localStorage window.localStorage.setItem('user','haha');
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!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen



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? 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

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-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:

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(){

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? 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

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: <imgv-bind:src="imageSrc"> In diesem Beispiel bezieht sich v-bind auf
