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

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>

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. La page qui accepte les cookies est définie ici comme b.html

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

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"))
}

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>

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

3 Code dans b.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;

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 = 'b.html'
//设置localStorage
window.localStorage.setItem('user','haha');

fichiers 2.b.html

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

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!