原生js页面怎么传参

原生JS页面传参的方法有多种，常见的有：URL参数、表单提交、localStorage/SessionStorage、cookies、以及通过JavaScript对象传递。
其中，URL参数是一种简单且常用的方法，适用于页面之间传递简单的数据。例如，通过URL中的查询字符串（query string）来传递参数。下面将详细介绍这种方法。

一、URL参数传递

URL参数传递是通过在URL中添加查询字符串来实现的，这些参数可以通过JavaScript读取和处理。查询字符串通常由“?”引导，并以“&”分隔多个参数。例如，https://example.com/page?param1=value1&param2=value2。

1、构建URL参数

在JavaScript中，可以通过字符串拼接或使用模板字符串来构建包含参数的URL。例如：

const param1 = 'value1';
const param2 = 'value2';
const url = `https://example.com/page?param1=${param1}&param2=${param2}`;

2、读取URL参数

读取URL参数可以使用URLSearchParams对象。这个对象提供了一个简单的方法来解析和访问URL中的查询字符串。

const urlParams = new URLSearchParams(window.location.search);
const param1 = urlParams.get('param1');
const param2 = urlParams.get('param2');
console.log(param1); // 输出: value1
console.log(param2); // 输出: value2

二、表单提交传参

表单提交是一种较为传统的页面传参方式，适用于提交大量数据或需要服务器处理的情况。表单提交可以是GET或POST请求。

1、创建表单

HTML表单元素用于收集用户输入，并通过提交将数据传递到指定的URL。

<form action="https://example.com/page" method="GET">
  <input type="text" name="param1" value="value1">
  <input type="text" name="param2" value="value2">
  <button type="submit">Submit</button>
</form>

2、处理表单数据

在提交表单后，数据会被添加到URL的查询字符串中，服务器端可以解析这些数据。客户端也可以通过URLSearchParams对象读取这些参数。

const urlParams = new URLSearchParams(window.location.search);
const param1 = urlParams.get('param1');
const param2 = urlParams.get('param2');
console.log(param1); // 输出: value1
console.log(param2); // 输出: value2

三、localStorage和SessionStorage传参

localStorage和SessionStorage是Web Storage API的一部分，用于在客户端存储数据。localStorage在浏览器会话之间持久化，而SessionStorage仅在单个浏览器会话中有效。

1、存储数据

使用setItem方法将数据存储到localStorage或SessionStorage中。

localStorage.setItem('param1', 'value1');
sessionStorage.setItem('param2', 'value2');

2、读取数据

使用getItem方法读取存储的数据。

const param1 = localStorage.getItem('param1');
const param2 = sessionStorage.getItem('param2');
console.log(param1); // 输出: value1
console.log(param2); // 输出: value2

四、Cookies传参

Cookies是一种常用的客户端存储数据的方式，通常用于会话管理、用户偏好设置和跟踪。JavaScript可以通过document.cookie属性来设置和读取Cookies。

1、设置Cookies

通过document.cookie属性设置Cookies。

document.cookie = "param1=value1; path=/";
document.cookie = "param2=value2; path=/";

2、读取Cookies

通过解析document.cookie属性来读取Cookies。

const getCookie = (name) => {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
};
const param1 = getCookie('param1');
const param2 = getCookie('param2');
console.log(param1); // 输出: value1
console.log(param2); // 输出: value2

五、通过JavaScript对象传递参数

在单页应用程序（SPA）中，通常通过JavaScript对象在不同组件或模块之间传递参数。这种方法通常依赖于前端框架，如React、Vue或Angular。

1、创建对象

创建一个JavaScript对象来存储参数。

const params = {
  param1: 'value1',
  param2: 'value2'
};

2、传递对象

在需要传递参数的地方，直接传递这个对象。

function handleParams(params) {
  console.log(params.param1); // 输出: value1
  console.log(params.param2); // 输出: value2
}
handleParams(params);

六、推荐项目管理系统

在项目团队管理中，使用合适的项目管理系统可以极大地提高效率。推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile。这两个系统都支持任务管理、进度跟踪和团队协作，能够帮助团队更好地管理项目和任务。

1、PingCode

PingCode是一款专为研发团队设计的项目管理系统，提供了从需求管理到测试发布的全流程管理解决方案。它支持敏捷开发、Scrum、Kanban等多种开发模式，能够满足不同团队的需求。

2、Worktile

Worktile是一款通用的项目协作软件，适用于各种类型的团队和项目。它提供了任务管理、日程安排、文件共享等功能，帮助团队更高效地协作和沟通。

总结

通过以上多种方法，可以实现原生JS页面传参。不同的方法适用于不同的场景和需求。在实际开发中，可以根据具体情况选择最合适的方法。同时，使用合适的项目管理系统，如PingCode和Worktile，可以进一步提高团队的工作效率和项目管理水平。