Question

我正在尝试创建一个从本地存储中获取组件状态的函数（如果它已经保存过）。它将是一个可以被所有组件使用的函数，例如：

    // my util function 
    myFunction = (componentUniqueIdentifier, componentState) => {

    // for all the keys found in componentState, try to find in local storage if localStorage[componentUniqueIdentifier][key] exists. if it exists, override value.


if(localStorage.getItem(key)) { componentState[key] = localStorage.getItem(key); }

return componentState;

    }

更重要的是：

import React, { Component } from 'react';

class Test extends Component {

    state = {
      thisIsAKey: ''
    }

    render() {

        console.log(this.state.thisIsAKey); // this shows value coming from local storage if found

        return (
            <div></div>
        );
    }

}

export default Test;

所以显然它不会那么简单，我会probs必须改变一些东西，但想法是创建这个函数，将所有组件的状态与本地存储同步，所以我不必写这个构建新组件时再次使用逻辑。

到目前为止，我还没有想出任何好主意......我一直在研究mixins或者创建一个我所有组件都会延伸的HOC，但这是一个好方法吗？

谢谢！

Answer 1

如果您正在寻找保存整个应用程序的状态，那么我建议您使用redux。然后，只要状态发生变化（或存储在redux中），您就可以对其进行字符串化并将其保存到localStorage。

将React.component状态与本地存储同步

1 个答案: