JavaScript 页面间数据传递的三种实现方案:Cookie、URL 与 LocalStorage

作者:代码拾荒时间:2026-10-22 16:50:00浏览:662

本文详细整理了JavaScript中实现页面间数据传递的三种常用方式。首先介绍通过Cookie存储用户名和密码并跳转至目标页面的方法;其次讲解利用URL拼接encodeURI编码参数进行页面跳转的技术;最后阐述使用LocalStorage进行同域同端口数据共享的操作及注意事项。

此前在面试中遇到相关提问,因此特此整理总结。受限于个人技术水平,内容如有疏漏或错误,恳请指正。

本文主要梳理了两种从当前页面层向另一个页面层传递参数的具体方法。

通过 Cookie 传递数据

第一种方法:利用 Cookie 进行数据传递

1. 发送 Cookie 的页面 HTML 结构,此处命名为 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 对应的 JavaScript 代码逻辑


//设置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. 接收 Cookie 的目标页面,此处定义为 b.html


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

4. b.html 中用于读取 Cookie 的 JavaScript 代码


//获取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"))
}

通过 URL 参数传递数据

第二种方法:通过 URL 参数传递数据

该案例同样演示从 a.html 向 b.html 传递参数的过程

1. a.html 的相关代码实现


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

2. 点击跳转按钮后,将 input 标签的 value 值传递至 b.html


function jump() {
  var s = document.getElementsByTagName('input')[0];
  location.href='7.获取参数.html?'+'txt=' + encodeURI(s.value);
}

3. b.html 中解析 URL 参数的代码


<div id="box"></div>
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 传递数据

第三种方法:通过 LocalStorage 传递数据

利用 LocalStorage 传递参数的原理与 Cookie 类似,但需注意:访问 LocalStorage 对象的页面必须来自相同的域名(子域名无效),且必须使用相同的协议并在同一个端口上运行。

1. a.html 中的 JavaScript 文件代码


//将localStorage传递到哪个页面
location.href = 'b.html'
//设置localStorage
window.localStorage.setItem('user','haha');

2. b.html 中读取 LocalStorage 的代码


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

总结

以上内容介绍了 JavaScript 实现页面间数据传递的几种方式,希望能为读者提供帮助。如有任何疑问,欢迎留言,小编会及时回复。感谢大家对本站的支持!

作者最新文章