Maison > interface Web > js tutoriel > code js pour implémenter le transfert de données entre les pages

code js pour implémenter le transfert de données entre les pages

不言
Libérer: 2018-08-13 15:41:30
original
2706 Les gens l'ont consulté

Le contenu de cet article concerne le code d'implémentation js pour le transfert de données sur la page. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Depuis qu'on m'a posé cette question lors d'entretiens précédents, j'ai réglé le problème aujourd'hui. En raison de mon niveau technique limité, s'il y a des erreurs, vous pouvez les critiquer.

Ce blog résume deux façons de transmettre des paramètres d'une couche de page à une autre.

1. Via la méthode des cookies

1. Passez le code HTML de la page cookie, ici nommé 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>
Copier après la connexion

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)
}
Copier après la connexion

3. La page qui accepte les cookies est définie ici comme b.html

<button onclick="getcookie()">获取</button>
Copier après la connexion

4 Le code js de 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"))
}
Copier après la connexion

2. Comment transmettre des paramètres via l'URL

Ce cas transmet également les paramètres de la page a.html à la page b.html

1 Code de a.html

<input type="text" value="猜猜我是谁">
<button onclick="jump()">跳转</button>
Copier après la connexion

2. Cliquez sur le bouton de saut pour transmettre la valeur de la balise d'entrée à b.html

function jump() {
    var s = document.getElementsByTagName(&#39;input&#39;)[0];
    location.href=&#39;7.获取参数.html?&#39;+&#39;txt=&#39; + encodeURI(s.value);
}
Copier après la connexion

3 Code dans b.html

<p id="box"></p>
Copier après la connexion
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;
Copier après la connexion

3. Via localStorage< 🎜. >

La transmission de paramètres via localStorage est similaire aux cookies. Mais attention : pour accéder à un objet localStorage, la page doit provenir du même nom de domaine (les noms de sous-domaines ne sont pas valides), utiliser le même protocole et être sur le même port.

1.fichiers js dans un.html

//将localStorage传递到哪个页面
location.href = &#39;b.html&#39;
//设置localStorage
window.localStorage.setItem(&#39;user&#39;,&#39;haha&#39;);
Copier après la connexion
fichiers 2.b.html

<button onclick="getcookie()">获取</button>
function getcookie() {
    //获取传递过来的localStorage
    console.log(window.localStorage.getItem('user'))
}
Copier après la connexion
Recommandations associées :

Quelles sont les méthodes en jQuery ? Méthodes couramment utilisées en jQuery (avec code)

Introduction détaillée à l'utilisation des objets de données en js (avec code)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal