首页初始化时读取sessionStorage中储存的数据

初始化时读取sessionStorage中储存的数据

时间: 2025-01-14 14:40:03 浏览: 34

### 加载 `sessionStorage` 数据当应用程序启动时，可以通过 JavaScript 自动检测并加载 `sessionStorage` 中保存的信息。这通常是在页面加载事件中完成的。 #### 页面加载时自动读取数据为了确保每次页面加载都能访问之前保存的数据，在文档就绪函数或相应的生命周期钩子内执行读取操作是一个常见做法[^1]： ```javascript document.addEventListener('DOMContentLoaded', function() { const author = sessionStorage.getItem('Author'); console.log(`The saved Author is ${author}`); }); ``` 这段代码会在 DOM 完全加载之后立即运行，并尝试从 `sessionStorage` 获取名为 `'Author'` 的键对应的值。如果存在该键，则将其显示在控制台；否则返回的是 `null`。对于现代前端框架（如 React 或 Vue），可以在组件挂载阶段处理这类逻辑。例如，在 React 应用程序里可以这样做： ```jsx import { useEffect } from 'react'; function App() { useEffect(() => { const author = sessionStorage.getItem('Author'); if (author !== null) { // 处理获取到的数据... console.log(author); } }, []); return ( <div> {/* 组件其他部分 */} </div> ); } ``` 此方法利用了 `useEffect` 钩子来模拟传统的 `componentDidMount` 生命周期方法，从而实现同样的功能[^3]。

阅读全文