vuex-persistedstate 在 sessionStorage 和 localStorage 之间切换

Question

如果用户选中“记住我”复选框，我想从 sessionStorage 切换到 localStorage，我也使用 vuex-persistedstate

export default store(function (/* { ssrContext } */) {
  const Store = createStore({
    state: {
    },
    actions: {
      setLodingMode({ commit }, newMode) {
        commit("SET_LOADING_MODE", newMode);
      },
      resetStates({ commit }) {
        commit("AUTHENTICATION_RESET_STATE");
        commit("login/RESET_STATE");
      },
    },
    modules: { login, authentication },
    plugins: [createPersistedState()],
  });

  return Store;
});

重点来了我要改成这样

state: {
      flag: false
        },
plugins: [
      createPersistedState({
        storage: flag ? window.localStorage : window.sessionStorage,
      }),
    ],

我想在登录时通过用户“记住我”复选框更改标志，因此当用户选择复选框时，标志更改为 true 并且所有数据都保存在 localStorage

Answer 1

作为@Estus Flask 的评论，我使用了自定义存储，并通过直接调用 localStorage 并在 localStorage 中设置标志来管理“记住我”选项

plugins: [
      createPersistedState({
        paths: ["authentication.userAuthenticationInfo"],
        storage: {
          getItem(key) {
            if (localStorage.getItem("rememberMe") == 1) {
              return localStorage.getItem(key);
            } else {
              return Cookies.get(key);
              //return sessionStorage.getItem(key);
            }
          },
          setItem(key, value) {
            if (localStorage.getItem("rememberMe") == 1) {
              localStorage.setItem(key, value);
            } else {
              Cookies.set(key, value);
              //sessionStorage.setItem(key, value);
            }
          },
          removeItem(key) {
            if (localStorage.getItem("rememberMe") == 1) {
              localStorage.removeItem(key);
            } else {
              Cookies.remove(key);
              //sessionStorage.removeItem(key);
            }
          },
        },
      }),
    ],

并且我在每次注销或 401 响应中清除 localStorage

vuex-persistedstate 在 sessionStorage 和 localStorage 之间切换

vuex-persistedstate switch between sessionStorage and localStorage

vue.js

vue-component

vuex