正文

掌握JS页面间传递对象参数的技巧

/0 浏览量
0622

在JavaScript开发中，页面间传递对象参数是一项常见的操作，它可以帮助我们在不同的页面或组件之间共享数据。以下是几种常见的技巧，帮助你轻松掌握这一技能。

一、使用URL参数传递对象

这种方法通过在URL中添加查询字符串来传递对象参数。以下是一个简单的例子：

// 发送页面
function sendData() {
  const data = { name: '张三', age: 25 };
  const url = `http://example.com/receive.html?name=${encodeURIComponent(data.name)}&age=${data.age}`;
  window.location.href = url;
}

// 接收页面
function receiveData() {
  const params = new URLSearchParams(window.location.search);
  const name = params.get('name');
  const age = parseInt(params.get('age'), 10);
  console.log(name, age);
}

二、使用localStorage或sessionStorage传递对象

localStorage和sessionStorage是浏览器提供的两种存储方式，它们可以用来在页面间传递对象参数。以下是一个例子：

// 发送页面
function sendData() {
  const data = { name: '张三', age: 25 };
  localStorage.setItem('user', JSON.stringify(data));
  window.location.href = 'receive.html';
}

// 接收页面
function receiveData() {
  const data = JSON.parse(localStorage.getItem('user'));
  console.log(data.name, data.age);
}

三、使用cookie传递对象

cookie是浏览器存储数据的一种方式，它也可以用来在页面间传递对象参数。以下是一个例子：

// 发送页面
function sendData() {
  const data = { name: '张三', age: 25 };
  document.cookie = `user=${encodeURIComponent(JSON.stringify(data))}`;
  window.location.href = 'receive.html';
}

// 接收页面
function receiveData() {
  const cookies = document.cookie;
  const matches = cookies.match(/user=([^;]+)/);
  if (matches) {
    const data = JSON.parse(decodeURIComponent(matches[1]));
    console.log(data.name, data.age);
  }
}

四、使用全局变量传递对象

在同一个域下，可以在全局变量中传递对象参数。以下是一个例子：

// 发送页面
function sendData() {
  const data = { name: '张三', age: 25 };
  window.data = data;
  window.location.href = 'receive.html';
}

// 接收页面
function receiveData() {
  console.log(window.data.name, window.data.age);
}

五、使用PostMessage API传递对象

PostMessage API允许页面之间进行安全的通信。以下是一个例子：

// 发送页面
function sendData() {
  const data = { name: '张三', age: 25 };
  window.opener.postMessage(data, '*');
}

// 接收页面
window.addEventListener('message', function(event) {
  console.log(event.data.name, event.data.age);
});

以上五种方法各有优缺点，你可以根据实际情况选择合适的方法。在实际开发中，要确保数据的安全性，避免敏感信息泄露。

-- 展开阅读全文 --