Switch off vuex-persist if using IE

Question

In my vuex store I use the vuex-persist plugin which works great, in all modern browsers. It doesn't work in IE11 and I would like to be able to switch off the plugin if the user is viewing with IE. Is this possible?

My vuex store is pulled into main.js via...
import store from '@/store/index.js';

And my store code is...

Vuex - index.js

import Vue from 'vue';
import Vuex from 'vuex';
import VuexPersist from 'vuex-persist';

import locales from './modules/locales.js';
import pdf from './modules/pdf-preview.js';
import site from './modules/site.js';
import user from './modules/user.js';

Vue.use(Vuex);

const vuexPersist = new VuexPersist({
  key: 'vuex',
  storage: window.localStorage,
  modules: ['pdf','site','user'],
});

const store = new Vuex.Store({
  state: {
  },
  modules: {
    locales,
    pdf,
    site,
    user,
  },
  plugins: [vuexPersist.plugin],
});

export default store;

Answer 1

I am assuming that the real problem you are encountering is that window.localStorage does not exist or does not allow you to store anything, even though Internet Explorer supported that since IE8. The best way is to simply detect the feature that is not supported (in this case localStorage), and simply not load the plugin:

const plugins = [];

let canStoreAnything = !!window.localStorage;
if (canStoreAnything) {
  try {
    window.localStorage.setItem("__test_localstorage_test__", 1);
    window.localStorage.removeItem("__test_localstorage_test__");
  } catch (e) {
    // Probably Safari in incognito mode
    canStoreAnything = false;
  }
}

if (canStoreAnything) {
  const vuexPersist = new VuexPersist({
    key: "vuex",
    storage: window.localStorage,
    modules: ["any"]
  });

  plugins.push(vuexPersist.plugin);
}

const store = new Vuex.Store({
  modules: {
    any
  },
  plugins
});

If there is another reason to detect Internet Explorer, simply trust the User Agent. It can be spoofed, but should work fine for your use case. Replace canStoreAnything with isIE which you can calculate with the following line ^[source]

const isIE = window.navigator.userAgent.indexOf('MSIE') >= 0 || window.navigator.userAgent.indexOf('Trident') >= 0;