Question

我发现了很多网站，这使我无需登录即可更改网站主题。

，当我刷新页面时，主题不会重置。我想知道我该怎么做，或者有人可以让我过正确的通行证。

我专注于后端，还是仅专注于前端（客户端）。

是否将网站与浏览器相关。还是其他？我确实非常想尝试将客户端选择保存到他的数据库中，但是现在，当我看到可以更改它的网站时，甚至没有登录，因此它与数据库无关。

还是与会话相关？

Answer 1

您可以在用户的浏览器中将主题信息保留在localStorage中。应用启动时，您可以检查localStorage中是否有任何主题信息并加以使用，更新主题时，可以在localStorage中进行设置。

示例

class App extends React.Component {
  state = {
    theme: localStorage.getItem("theme") || "red"
  };

  toggleTheme = () => {
    this.setState(
      ({ theme }) => ({
        theme: theme === "red" ? "green" : "red"
      }),
      () => {
        localStorage.setItem("theme", this.state.theme);
      }
    );
  };

  render() {
    return (
      <div style={{ backgroundColor: this.state.theme }}>
        <div>Welcome to my website</div>
        <button onClick={this.toggleTheme}> Toggle theme </button>
      </div>
    );
  }
}

Answer 2

您可以在Reactjs中使用类似的方法（显然，您需要自己实现MyTheme和SelectInput组件）：

class MyReactComp extends React.Component {

    setTheme(theme) {
        localStorage.setItem('theme', selectedTheme);
    }
    render() {
        <MyThemeLayout theme={localStorage.getItem('theme')} />
        <MySelectInput onChange={theme => this.setTheme(theme)} />
    }
}

否则，您可以将主题选择发送到后端，将其存储在MongoDB或其他内容中，然后设置ID cookie，以便在用户下次访问该站点时可以检索主题。

如何更改网站主题并保存此主题，以使其在重新加载时不会更改？

2 个答案: