js页面传值方式

在JavaScript中，页面传值的方式主要有以下几种：

1. URL参数传值

基础概念：通过URL的查询字符串（query string）传递数据。

优势：简单易用，适用于GET请求。类型：字符串。 应用场景：页面跳转时传递少量数据。

示例代码：

// 传递数据
window.location.href = "targetPage.html?param1=value1&param2=value2";

// 接收数据
const urlParams = new URLSearchParams(window.location.search);
const param1 = urlParams.get('param1');
const param2 = urlParams.get('param2');

2. LocalStorage

基础概念：HTML5提供的本地存储方式，可以存储较大的数据量。

优势：数据持久化，不会随页面刷新或关闭而丢失。类型：字符串（可以通过JSON.stringify和JSON.parse处理对象）。 应用场景：需要在多个页面间共享数据。

示例代码：

// 存储数据
localStorage.setItem('key', 'value');

// 读取数据
const value = localStorage.getItem('key');

// 删除数据
localStorage.removeItem('key');

3. SessionStorage

基础概念：与LocalStorage类似，但数据仅在当前会话有效。

优势：数据仅在当前窗口或标签页有效，安全性较高。类型：字符串。 应用场景：临时存储页面数据，不需要跨页面共享。

示例代码：

// 存储数据
sessionStorage.setItem('key', 'value');

// 读取数据
const value = sessionStorage.getItem('key');

// 删除数据
sessionStorage.removeItem('key');

4. Cookies

基础概念：存储在用户浏览器中的小型数据片段。

优势：可以设置过期时间，适用于需要跨会话持久化的数据。类型：字符串。 应用场景：用户身份验证、跟踪用户行为等。

示例代码：

// 设置cookie
document.cookie = "key=value; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";

// 读取cookie
const cookies = document.cookie.split(';').map(cookie => cookie.trim());
const value = cookies.find(cookie => cookie.startsWith('key=')).split('=')[1];

// 删除cookie
document.cookie = "key=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

5. PostMessage

基础概念：用于在不同窗口或iframe之间传递消息。

优势：安全，支持跨域通信。类型：任意类型（通过结构化克隆算法）。 应用场景：跨窗口或iframe通信。

示例代码：

// 发送消息
window.parent.postMessage({ key: 'value' }, '*');

// 接收消息
window.addEventListener('message', event => {
  const data = event.data;
  console.log(data);
});

6. Redux或Vuex状态管理

基础概念：用于管理应用的全局状态。

优势：集中管理状态，易于维护和调试。类型：对象。 应用场景：大型单页应用（SPA）。

示例代码（Redux）：

// store.js
import { createStore } from 'redux';

const initialState = { value: 0 };
function reducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { value: state.value + 1 };
    default:
      return state;
  }
}

const store = createStore(reducer);

// 在组件中使用
import { useSelector, useDispatch } from 'react-redux';

function Counter() {
  const value = useSelector(state => state.value);
  const dispatch = useDispatch();

  return (
    <div>
      <p>{value}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
    </div>
  );
}