JS传值到另外一个页面及显示出来

在网页开发中，JavaScript（JS）经常用于处理页面间的交互，包括传递数据和在新页面中显示这些数据。本文将详细讲解如何通过JS实现在一个页面传递数据，并在另一个页面中将其显示出来。 我们要了解JavaScript在不同页面间传递数据的几种常见方法： 1. **URL参数**：可以通过在URL后面添加查询字符串来传递数据，例如`http://example.com/page.html?name=value`。在目标页面中，可以通过`window.location.search`获取查询字符串，然后使用`URLSearchParams`对象解析参数。 2. **本地存储（LocalStorage或SessionStorage）**：这两种方法允许在浏览器的本地存储数据。LocalStorage数据持久化，即使关闭浏览器也会保留；SessionStorage数据只在当前会话内有效。可以使用`localStorage.setItem()`和`localStorage.getItem()`或`sessionStorage.setItem()`和`sessionStorage.getItem()`进行设置和获取。 3. **cookies**：虽然过时，但仍然可以用来传递小量数据。通过`document.cookie`设置和读取cookie。 4. **服务器端路由**：通过Ajax请求，将数据发送到服务器，然后在新页面加载时由服务器返回这些数据。 5. **Web Storage API的事件监听**：利用`window.addEventListener('storage')`监听localStorage或SessionStorage的变化，当数据在另一页面改变时触发事件。 接下来，我们将重点讨论如何实现这一过程： 1. **URL参数**：在源页面，使用`window.location.href`设置新的URL，附带要传递的数据作为查询字符串。在目标页面，使用`window.onload`或`window.onpopstate`事件来捕获URL变化，并解析查询字符串。 ```javascript // 源页面 let data = 'myValue'; window.location.href = `./target.html?data=${encodeURIComponent(data)}`; // 目标页面 window.onload = function() { let urlParams = new URLSearchParams(window.location.search); let dataFromPrevPage = decodeURIComponent(urlParams.get('data')); // 然后在页面上显示dataFromPrevPage }; ``` 2. **LocalStorage或SessionStorage**：在源页面，设置数据到对应的Storage，然后在目标页面读取。 ```javascript // 源页面 let data = 'myValue'; localStorage.setItem('dataKey', data); // 目标页面 window.onload = function() { let dataFromPrevPage = localStorage.getItem('dataKey'); // 然后在页面上显示dataFromPrevPage }; ``` 3. **服务器端路由**：通过Ajax发送数据到服务器，服务器保存状态，然后在新页面加载时由服务器返回数据。 ```javascript // 源页面 fetch('/set-data', { method: 'POST', body: JSON.stringify({ data: 'myValue' }), headers: { 'Content-Type': 'application/json' }, }) .then(response => response.ok) .then(() => window.location.href = './target.html'); // 在服务器端处理并保存数据 // 目标页面 fetch('/get-data') .then(response => response.json()) .then(data => { // 然后在页面上显示data }); ``` 这些技术的选择取决于具体的需求，如数据大小、安全性、跨域限制以及是否需要持久化存储等因素。在实际应用中，可能需要结合使用多种方法以达到最佳效果。记住，每次传递数据时都要考虑到数据的安全性和用户隐私，避免不必要的风险。