如何在angular8中从Oninit上的会话中获取值？

在Angular 8中，ngOnInit 是组件生命周期钩子之一，它在组件实例化后、首次数据绑定之前被调用。如果你想在 ngOnInit 中从会话存储（如 sessionStorage 或 localStorage）中获取值，你可以按照以下步骤操作：

基础概念

生命周期钩子：Angular组件具有一系列的生命周期钩子，允许你在组件的不同阶段执行代码。ngOnInit 是其中之一，用于初始化组件。
会话存储：sessionStorage 是Web Storage API的一部分，它提供了一种在浏览器会话期间存储数据的方式。数据在页面会话结束时会被清除。

示例代码

假设你想在组件初始化时从 sessionStorage 中获取一个名为 userData 的值，并将其赋给组件的属性。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
  userData: any;

  constructor() { }

  ngOnInit(): void {
    // 从sessionStorage中获取数据
    this.userData = JSON.parse(sessionStorage.getItem('userData'));
  }
}

优势

持久化数据：会话存储允许你在浏览器会话期间保持数据，这对于需要在多个页面之间共享数据的场景非常有用。
易于使用：sessionStorage 提供了简单的API来存储和检索数据。

应用场景

用户认证信息：存储用户的登录状态或认证令牌。
临时数据：存储用户在单次会话中需要的临时数据。

可能遇到的问题及解决方法

1. 数据未定义或为空

原因：可能是因为 sessionStorage 中没有对应的键值对，或者数据格式不正确。

解决方法：

ngOnInit(): void {
  const data = sessionStorage.getItem('userData');
  if (data) {
    try {
      this.userData = JSON.parse(data);
    } catch (e) {
      console.error('Failed to parse user data', e);
      this.userData = {}; // 或者设置一个默认值
    }
  } else {
    console.warn('No user data found in sessionStorage');
    this.userData = {}; // 或者设置一个默认值
  }
}