javascript - How would a share the state of the same React component across multiple pages? - Stack Overflow

admin管理员组

文章数量:1024707

I have a React Component with a toggle on it (on or off). The on / off state is handled by the ponents own state (this.state).

But I want that state to remain when the user goes from one page to the next. For instance they are on home.html and then when user clicks to another page like about.html.

Also this is not a single page app. Do I want Redux or Mobox or some other state management tool? Suggestions are weled.

I have a React Component with a toggle on it (on or off). The on / off state is handled by the ponents own state (this.state).

But I want that state to remain when the user goes from one page to the next. For instance they are on home.html and then when user clicks to another page like about.html.

Also this is not a single page app. Do I want Redux or Mobox or some other state management tool? Suggestions are weled.

• javascript
• reactjs
• mobx

Share Improve this question Follow edited Mar 21, 2018 at 15:40 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Feb 14, 2018 at 21:31 ShowcaselfloydShowcaselfloyd 8481111 silver badges3232 bronze badges 5

• 4 Retaining JavaScript state across multiple pages can be done using localStorage or cookies, or even url parameters. Asked and answered lots of times. Whether you should abuse React for a multi-page app is a different question (my answer would be a resounding "no") – user5734311 Commented Feb 14, 2018 at 21:33
• Dang, if moving from one page to another involves full page refresh, you're either going to have to store state information in local storage (probably easier) or somehow municate the state information back to server – Varinder Commented Feb 14, 2018 at 21:34
• So the answer is it can't be done in a local react ponent without passing it along outside of it then? – Showcaselfloyd Commented Feb 14, 2018 at 21:34
• 1 A ReactComponent can easily initialize its state based on localStorage. – user5734311 Commented Feb 14, 2018 at 21:35
• So localStorage is the best solution for this? If so that's cool. Just wanted to get feedback. – Showcaselfloyd Commented Feb 14, 2018 at 21:36

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

But I want that state to remain when the user goes from one page to the next.

As has been said in ments probably the most straight-forward way is to just store the state to localstorage and retrieve it when the ponent mounts.

class Toggle extends Component {
  ponentDidMount() {
    const storedValue = localStorage.getItem("my_value");
    if (storedValue) {
      this.setState({ value: storedValue });
    }
  }
  handleChange = e => {
    const value = e.target.value;
    this.setState({ value });
    localStorage.setItem("my_value", value);
  }
  render() {
    return ...
  }
}

Also this is not a single page app. Do I want Redux or Mobox or some other state management tool? Suggestions are weled.

No, Redux and Mobx aren't necessary, they are state containers that have ways to persist to localstorage (for example redux-localstorage and mobx-localstorage), but the key is just persisting to localstorage.

If you are not moving pages (whole page refresh) and only using different ponents then you can simply define a state in parent ponent and pass it in the child ponents along with a function that would toggle the state.

Function would look like this:

ToggleState = newState => this.setState({ myState : newState });

Pass this function as prop to child ponent.

Use it in child ponent as

This.props.toggle(newState);

**but if it is across multiple pages the you can go for localstorage **

Hope this resolves your issue.

I have a React Component with a toggle on it (on or off). The on / off state is handled by the ponents own state (this.state).

But I want that state to remain when the user goes from one page to the next. For instance they are on home.html and then when user clicks to another page like about.html.

Also this is not a single page app. Do I want Redux or Mobox or some other state management tool? Suggestions are weled.

I have a React Component with a toggle on it (on or off). The on / off state is handled by the ponents own state (this.state).

But I want that state to remain when the user goes from one page to the next. For instance they are on home.html and then when user clicks to another page like about.html.

Also this is not a single page app. Do I want Redux or Mobox or some other state management tool? Suggestions are weled.

• javascript
• reactjs
• mobx

Share Improve this question Follow edited Mar 21, 2018 at 15:40 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Feb 14, 2018 at 21:31 ShowcaselfloydShowcaselfloyd 8481111 silver badges3232 bronze badges 5

• 4 Retaining JavaScript state across multiple pages can be done using localStorage or cookies, or even url parameters. Asked and answered lots of times. Whether you should abuse React for a multi-page app is a different question (my answer would be a resounding "no") – user5734311 Commented Feb 14, 2018 at 21:33
• Dang, if moving from one page to another involves full page refresh, you're either going to have to store state information in local storage (probably easier) or somehow municate the state information back to server – Varinder Commented Feb 14, 2018 at 21:34
• So the answer is it can't be done in a local react ponent without passing it along outside of it then? – Showcaselfloyd Commented Feb 14, 2018 at 21:34
• 1 A ReactComponent can easily initialize its state based on localStorage. – user5734311 Commented Feb 14, 2018 at 21:35
• So localStorage is the best solution for this? If so that's cool. Just wanted to get feedback. – Showcaselfloyd Commented Feb 14, 2018 at 21:36

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

But I want that state to remain when the user goes from one page to the next.

As has been said in ments probably the most straight-forward way is to just store the state to localstorage and retrieve it when the ponent mounts.

class Toggle extends Component {
  ponentDidMount() {
    const storedValue = localStorage.getItem("my_value");
    if (storedValue) {
      this.setState({ value: storedValue });
    }
  }
  handleChange = e => {
    const value = e.target.value;
    this.setState({ value });
    localStorage.setItem("my_value", value);
  }
  render() {
    return ...
  }
}

Also this is not a single page app. Do I want Redux or Mobox or some other state management tool? Suggestions are weled.

No, Redux and Mobx aren't necessary, they are state containers that have ways to persist to localstorage (for example redux-localstorage and mobx-localstorage), but the key is just persisting to localstorage.

If you are not moving pages (whole page refresh) and only using different ponents then you can simply define a state in parent ponent and pass it in the child ponents along with a function that would toggle the state.

Function would look like this:

ToggleState = newState => this.setState({ myState : newState });

Pass this function as prop to child ponent.

Use it in child ponent as

This.props.toggle(newState);

**but if it is across multiple pages the you can go for localstorage **

Hope this resolves your issue.

本文标签： javascriptHow would a share the state of the same React component across multiple pagesStack Overflow