Question

我正在构建3种具有蚂蚁设计的差异模式/单选按钮，因此我想从本地存储中获取以前的状态并将其分配给我的值。

仅当我对值进行硬编码时，它才有效，必须有一种更干净的方法来实现。

char*

Answer 1

有几种方法可以做到这一点，但我将描述一个简单的方法。您可以将localStorage中的组件状态保存为JSON编码的字符串，并在重新创建组件时将其恢复。

我们可以定义保存和加载方法：

function getStoredComponentState(initialState) {
    const storedState = localStorage.getItem(checkedStorageKey);
    return storedState ? JSON.parse(storedState) : initialState;
}

function storeComponentState(state) {
    localStorage.setItem(checkedStorageKey, JSON.stringify(state))
}

我们从存储的内容中初始化状态，并在没有存储的先前状态的情况下提供默认值：

constructor() {
    super();
    this.state = getStoredComponentState({
      checked: false,
    })
  }

当发生更改时，我们将保留对存储所做的任何更改：

setState(state) {
    super.setState(state);
    storeComponentState(state);    
  }

它有效！您可以进行更改，刷新页面，然后查看以前的状态是否已还原。 JSFiddle

从本地存储获取并使用以前的状态

1 个答案: