如何在sessionStorage中保存Mobx状态

要在sessionStorage中保存Mobx状态，我们可以利用Mobx提供的反应式机制和浏览器的sessionStorage API。这样既可以利用Mobx管理状态的便利，又能够在用户关闭浏览器标签后删除这些数据，因为sessionStorage的存储周期仅限于页面会话。

步骤和示例代码：

第一步：创建Mobx Store

首先，我们需要有一个Mobx store，这里提供一个简单的例子：

javascript
import { makeAutoObservable } from "mobx";

class UserStore {
  userInfo = {
    name: "",
    age: 0
  };

  constructor() {
    makeAutoObservable(this);
  }

  setUserInfo(userInfo) {
    this.userInfo = userInfo;
  }
}

const userStore = new UserStore();
export default userStore;

第二步：监听Store变化，并更新sessionStorage

我们可以使用 autorun函数从 mobx库中来自动监听任何可能影响到的变化，并更新sessionStorage。这样每当store中的数据发生变化时，我们都会同步更新sessionStorage。

javascript
import { autorun } from "mobx";

autorun(() => {
  sessionStorage.setItem('userInfo', JSON.stringify(userStore.userInfo));
});

这段代码会监视 userStore中的 userInfo对象。每当 userInfo发生变化时，都会自动将更新后的 userInfo序列化为JSON字符串，并存储在sessionStorage中。

第三步：从sessionStorage恢复状态（如果有必要）

当用户重新打开页面时，我们可以在应用加载时检查sessionStorage中是否有先前保存的状态，并据此初始化store。

javascript
const savedUserInfo = sessionStorage.getItem('userInfo');

if (savedUserInfo) {
  userStore.setUserInfo(JSON.parse(savedUserInfo));
}

这段代码尝试从sessionStorage获取 userInfo。如果存在，它会解析JSON字符串，然后使用解析后的数据来设置store的状态。

总结：

通过这种方式，我们可以确保Mobx的状态在页面会话期间保持一致，并在用户关闭浏览器标签后自动清除。这种方法既简单又有效，能够让状态管理与持久化结合得更加紧密。