在jQuery中实现跨页面变量传值，常用方法有URL参数、localStorage与sessionStorage，URL传值可通过window.location.href = 'target.html?var=' + value传递，接收页用URLSearchParams(location.search).get('var')获取；localStorage可存储复杂数据，传值页用localStorage.setItem('key', JSON.stringify(value))，接收页用JSON.parse(localStorage.getItem('key'))，持久化存储需手动清除；sessionStorage类似但仅会话有效，jQuery可辅助处理参数（如$.param）或DOM操作，但核心依赖浏览器API，注意数据类型转换及安全编码，避免XSS风险。
使用jQuery实现页面间变量传递的实用方法
在Web开发中，页面间传递变量值是一项常见需求，例如从列表页跳转到详情页时传递ID，或者表单提交后将数据带到结果页进行展示，jQuery作为广泛使用的JavaScript库，虽然不直接提供跨页面传值功能，但可以通过结合原生API或插件轻松实现，本文将详细介绍几种主流的jQuery跨页面变量传递方法，包括其原理、代码示例及适用场景。
URL参数传递（查询字符串传值）
原理
通过在URL末尾拼接参数（如?key1=value1&key2=value2），目标页面解析URL获取参数值，这是最简单、最常用的传值方式,适合临时传递少量数据。
实现步骤
源页面：拼接参数并跳转
使用jQuery绑定事件，通过window.location.href或window.location.assign()跳转目标页面,并拼接参数。
<!-- 源页面：source.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">源页面</title>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
</head>
<body>
<input type="text" id="userName" placeholder="请输入用户名">
<button id="jumpBtn">跳转到目标页面</button>
<script>
$(document).ready(function() {
$('#jumpBtn').click(function() {
const userName = $('#userName').val(); // 获取输入值
if (userName.trim()) {
// 拼接URL并跳转，使用encodeURIComponent处理特殊字符
const targetUrl = `target.html?name=${encodeURIComponent(userName)}&age=25`;
window.location.href = targetUrl;
} else {
alert('请输入用户名');
}
});
});
</script>
</body>
</html>
目标页面：解析URL参数
目标页面加载时，通过解析当前URL的查询字符串获取参数值,可封装一个jQuery函数简化解析逻辑。
<!-- 目标页面：target.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">目标页面</title>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
</head>
<body>
<h2>用户信息</h2>
<p>用户名：<span id="displayName"></span></p>
<p>年龄：<span id="displayAge"></span></p>
<script>
$(document).ready(function() {
// 封装jQuery函数：获取URL参数
$.getUrlParam = function(name) {
const reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`);
const r = window.location.search.substr(1).match(reg);
return r ? decodeURIComponent(r[2]) : null;
};
// 获取参数并显示
const name = $.getUrlParam('name');
const age = $.getUrlParam('age');
$('#displayName').text(name || '未传递');
$('#displayAge').text(age || '未传递');
});
</script>
</body>
</html>
优缺点分析
优点：
- 实现简单，无需额外存储
- 直接暴露在URL中便于调试和分享
- 支持浏览器前进后退功能
缺点：
- 参数值会显示在地址栏，不适合传递敏感信息
- URL长度有限（约2048字符），大数据量需慎用
- 特殊字符需要编码处理
localStorage/sessionStorage存储传值
原理
利用浏览器提供的localStorage（持久化存储，除非手动清除否则长期有效）或sessionStorage（会话级存储，关闭标签页后清除）存储数据,目标页面读取对应键值获取变量。
实现步骤
源页面：存储数据并跳转
使用jQuery操作localStorage,存储键值对后跳转目标页面。
<!-- 源页面：source.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">源页面</title>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
</head>
<body>
<input type="text" id="productInfo" placeholder="请输入商品信息（如：iPhone 13）">
<button id="saveAndJump">保存并跳转</button>
<script>
$(document).ready(function() {
$('#saveAndJump').click(function() {
const productInfo = $('#productInfo').val();
if (productInfo.trim()) {
// 存储到localStorage（key自定义）
localStorage.setItem('productData', JSON.stringify({
name: productInfo,
price: 5999,
description: '最新款智能手机'
}));
window.location.href = 'target.html';
} else {
alert('请输入商品信息');
}
});
});
</script>
</body>
</html>
目标页面：读取存储数据
目标页面从localStorage中读取数据并展示。
<!-- 目标页面：target.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">目标页面</title>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
</head>
<body>
<h2>商品详情</h2>
<p>商品名称：<span id="productName"></span></p>
<p>商品价格：<span id="productPrice"></span></p>
<p>商品描述：<span id="productDesc"></span></p>
<button id="clearData">清除数据</button>
<script>
$(document).ready(function() {
// 从localStorage读取数据
const productData = JSON.parse(localStorage.getItem('productData') || '{}');
// 显示数据
$('#productName').text(productData.name || '未传递');
$('#productPrice').text(productData.price ? `¥${productData.price}` : '未传递');
$('#productDesc').text(productData.description || '未传递');
// 清除数据按钮事件
$('#clearData').click(function() {
localStorage.removeItem('productData');
alert('数据已清除');
});
});
</script>
</body>
</html>
优缺点分析
优点：
- 存储容量较大（localStorage约5MB,sessionStorage约5MB）
- 数据不会显示在URL中，安全性更高
- 支持存储复杂数据结构（如JSON对象）
缺点：
- localStorage是持久化的，需要手动清除
- 同源策略限制，不同域名无法访问
- 存储的数据类型有限制（只能存储字符串）
Cookie传值方法
原理
Cookie是存储在用户浏览器中的小型文本文件，可以设置过期时间,适合需要长期保持的会话数据。
实现步骤
源页面：设置Cookie
$(document).ready(function() {
$('#setCookieBtn').click(function() {
const userInfo = $('#userInfo').val();
if (userInfo.trim()) {
// 设置Cookie，7天后过期
const expires = new Date();
expires.setDate(expires.getDate() + 7);
document.cookie = `userData=${encodeURIComponent(userInfo)}; expires=${expires.toUTCString()}; path=/`;
window.location.href = 'target.html';
}
});
});
目标页面：读取Cookie
$(document).ready(function() {
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
}
const userData = decodeURIComponent(getCookie('userData
