时间戳

首页 > 解决方案 > 在另一个类中反应的本地存储处理

reactjs - 在另一个类中反应的本地存储处理

问题描述

我有一个组件，每次将某些内容添加到状态时，也会将其添加到本地存储中。它已从 componentWillUnmnout 上的本地存储中删除。我被告知要为本地存储处理准备一个间接抽象层，以遵循单一责任原则。我很困惑如何做到这一点，有人可以举一个这样的层，类的例子吗？

  componentWillUnmount() {
    localStorage.removeItem('currentUser');
  }

  static getDerivedStateFromProps(nextProps) {
    const currUser = JSON.parse(
      localStorage.getItem('currentUser')
    );
    if (
      currUser && nextProps.users.some(
        (user) => user.id === currUser.id
      )
    ) {
      return {
        user: currUser,
      };
    }
    return null;
  }


  const onSelect = (
    user
  ) => {
    this.setState({
      user,
    });
    localStorage.setItem('currentUser', JSON.stringify(user));
  }

  private onRemove = () => {
    this.setState({
      user: null,
    });
    localStorage.removeItem('currentUser');
  }

标签： reactjslocal-storage

解决方案

在这里应用单一职责原则可能会过度编程，因为 Javascripts 不是 OOP。但是如果你需要，直接使用有一些问题localStorage可以分开：

  • 您的组件不需要知道您存储持久数据的位置。在这种情况下，它不需要知道 localStorage 的使用情况。
  • 您的组件不需要知道您如何存储数据。在这种情况下，它不需要处理JSON.stringify传递给 localStorage 和JSON.parse检索。

有了这些想法，localStorage 的接口可以这样实现

const Storage = {
  isReady: function() {
    return !!window && !!window.localStorage;
  },
  setCurrentUser: function(user) {
    if (!this.isReady()) throw new Error("Cannot find localStorage");
    localStorage.setItem('currentUser', JSON.stringify(user));
    return true;
  },
  getCurrentUser: function() {
    if (!this.isReady()) throw new Error("Cannot find localStorage");
    if (localStorage.hasOwnProperty('currentUser'))
    {
      return JSON.parse(localStorage.getItem('currentUser'));
    }
    return null;
  },
  removeCurrentUser: function() {
    if (!this.isReady()) throw new Error("Cannot find localStorage");
    localStorage.removeItem('currentUser');
    return true;
  }
}

通过导入Storage对象，您可以重写您的组件：

  componentWillUnmount() {
    Storage.removeCurrentUser();
  }

  static getDerivedStateFromProps(nextProps) {
    const currUser = Storage.getCurrentUser();
    if (
      currUser && nextProps.users.some(
        (user) => user.id === currUser.id
      )
    ) {
      return {
        user: currUser,
      };
    }
    return null;
  }


  const onSelect = (
    user
  ) => {
    this.setState({
      user,
    });
    Storage.setCurrentUser(user);
  }

  private onRemove = () => {
    this.setState({
      user: null,
    });
    Storage.removeCurrentUser();
  }

推荐阅读