6_刷新时候变量丢失.md

[github-actions]

我是页眉

---

正则匹配链接[]()语法上有局限性 , 如有疑虑可查看本文原文

ReactRouter 在当前页面做刷新动作 useLocation(); 就没有值了

React Router 的 useLocation 钩子是用于获取当前页面的 location 对象的，而在浏览器刷新时，页面会重新加载，React 组件也会重新渲染，这可能导致之前的 location 对象被重置。

当页面刷新时，useLocation 钩子返回的 location 对象的值可能为 undefined 或包含一些初始值。这是因为在刷新页面时，React Router 需要重新计算 location 对象。

如果你希望在页面刷新后能够访问之前的 location 对象，你可以考虑使用浏览器的 sessionStorage 或 localStorage 来在页面之间保持状态。你可以在组件挂载时将 location 对象保存到 sessionStorage 中，然后在刷新后再次检查 sessionStorage。

以下是一个简单的示例：

import React, { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

const MyComponent = () => {
  const location = useLocation();

  useEffect(() => {
    // 在组件挂载时将 location 对象保存到 sessionStorage 中
    sessionStorage.setItem('lastLocation', JSON.stringify(location));
  }, [location]);

  // 在刷新后再次检查 sessionStorage
  const savedLocation = JSON.parse(sessionStorage.getItem('lastLocation')) || {};

  return (
    <div>
      <p>Current Location: {location.pathname}</p>
      <p>Saved Location: {savedLocation.pathname}</p>
    </div>
  );
};

export default MyComponent;

请注意，使用 sessionStorage 或 localStorage 时要小心，因为这些存储是全局的，可能会被其他页面或组件影响。确保在适当的时候清理或更新这些存储的内容。

sessionStorage && localStorage

sessionStorage 和 localStorage 都是 Web Storage API 提供的两种客户端存储数据的方式。它们允许你在客户端（浏览器）中存储数据，以便在不同的页面或刷新页面时仍然可以访问。

1. sessionStorage:

   • sessionStorage 是一个会话级别的存储，数据在当前浏览器标签页或窗口关闭时将被清除。
   • 存储在 sessionStorage 中的数据只在当前会话期间有效，刷新页面不会影响这个存储。
   • 语法：sessionStorage.setItem(key, value) 用于存储数据，sessionStorage.getItem(key) 用于获取数据。

2. localStorage:

   • localStorage 是一种长期存储，存储的数据将一直存在，除非用户清除浏览器缓存或你通过代码移除。
   • 存储在 localStorage 中的数据在页面关闭后仍然有效，甚至在浏览器重新启动后仍然存在。
   • 语法：localStorage.setItem(key, value) 用于存储数据，localStorage.getItem(key) 用于获取数据。

示例：

// 使用 sessionStorage 存储数据
sessionStorage.setItem('username', 'john_doe');
const storedUsername = sessionStorage.getItem('username');
console.log(storedUsername); // 输出: john_doe

// 使用 localStorage 存储数据
localStorage.setItem('theme', 'dark');
const storedTheme = localStorage.getItem('theme');
console.log(storedTheme); // 输出: dark

这两者的主要区别在于存储数据的生命周期。选择使用哪一个取决于你的需求：如果你只需要在会话期间保留数据，可以使用 sessionStorage；如果你希望数据在多个会话之间保留，甚至在用户关闭浏览器后仍然有效，可以使用 localStorage。

---

我是页脚