js刷新页面并传值

在JavaScript中，刷新页面并传递参数可以通过多种方式实现，常见的方法包括使用URL查询参数、localStorage、sessionStorage或cookies。以下是各种方法的详细介绍及其应用场景：

1. 使用URL查询参数

基础概念：通过在URL中添加查询字符串（query string）来传递参数。

优势：

简单直观，易于实现。
参数可以直接在浏览器地址栏中看到，方便调试。

示例代码：

// 假设要传递的参数是 name 和 age
const name = 'Alice';
const age = 25;

// 构建新的URL
const newUrl = `${window.location.origin}${window.location.pathname}?name=${encodeURIComponent(name)}&age=${encodeURIComponent(age)}`;

// 刷新页面
window.location.href = newUrl;

应用场景：

需要在页面刷新后仍然保留某些参数的情况，如分页、搜索结果等。

2. 使用`localStorage`

基础概念：localStorage允许在浏览器中存储键值对数据，数据不会随页面刷新而丢失。

优势：

数据持久化，即使浏览器关闭后重新打开，数据仍然存在。
不会显示在URL中，适合存储敏感信息。

示例代码：

// 存储数据
localStorage.setItem('name', 'Alice');
localStorage.setItem('age', '25');

// 刷新页面
window.location.reload();

读取数据：

// 页面加载后读取数据
window.addEventListener('load', () => {
  const name = localStorage.getItem('name');
  const age = localStorage.getItem('age');
  console.log(name, age);
});

应用场景：

需要在多个页面间共享数据的情况。

3. 使用`sessionStorage`

基础概念：sessionStorage类似于localStorage，但数据仅在当前会话期间有效，关闭浏览器标签或窗口后数据会被清除。

优势：

数据不会随页面刷新而丢失。
数据仅在当前会话中可见，适合存储临时数据。

示例代码：

// 存储数据
sessionStorage.setItem('name', 'Alice');
sessionStorage.setItem('age', '25');

// 刷新页面
window.location.reload();

读取数据：

// 页面加载后读取数据
window.addEventListener('load', () => {
  const name = sessionStorage.getItem('name');
  const age = sessionStorage.getItem('age');
  console.log(name, age);
});

应用场景：

需要在单个页面会话中传递数据的情况。

4. 使用`cookies`

基础概念：cookies是存储在用户浏览器中的小型数据片段，可以设置过期时间。

优势：

可以设置过期时间，适合存储需要长期保存的数据。
可以通过设置HttpOnly属性提高安全性。

示例代码：

// 存储数据
document.cookie = `name=Alice; path=/`;
document.cookie = `age=25; path=/`;

// 刷新页面
window.location.reload();

读取数据：

// 页面加载后读取数据
window.addEventListener('load', () => {
  const cookies = document.cookie.split('; ').reduce((acc, cookie) => {
    const [key, value] = cookie.split('=');
    acc[key] = value;
    return acc;
  }, {});
  console.log(cookies.name, cookies.age);
});

应用场景：