vuejs store localStorage set object

Question

I have a theme config store, and I set "localStorage" on this store, I can read it the same way. but I'm recording them one by one, is it possible to send them all as objects instead, if possible, please give an example. how do i set it on the store I'm a little newbie in storage, please comment accordingly.

export const $themeConfig = {
    app: {
        appName: 'Name', 
        appLogoImage: '', 
    },
    layout: {
        skin: 'light', 
        type: 'vertical', 
        contentWidth: 'full', 
        menu: {
            hidden: false,
            isCollapsed: false,
        },
        navbar: {
            
            type: 'floating', 
            backgroundColor: 'dark',
        },
        footer: {
            type: 'static', 
        },
        customizer: true,
    },
}

import {$themeConfig} from '../../themeConfig'

export default {
    namespaced: true,
    state: {
        layout: {
            skin: localStorage.getItem('themeConfig-skin') || $themeConfig.layout.skin,
            type: localStorage.getItem('themeConfig-menuLayout') || $themeConfig.layout.type,
            contentWidth: localStorage.getItem('themeConfig-contentWidth') || $themeConfig.layout.contentWidth,
            menu: {
                hidden: localStorage.getItem('themeConfig-menuHidden') || $themeConfig.layout.menu.hidden,
            },
            navbar: {
                type: localStorage.getItem('themeConfig-navbarType') || $themeConfig.layout.navbar.type,
                backgroundColor: localStorage.getItem('themeConfig-navbarBG') || $themeConfig.layout.navbar.backgroundColor,
            },
            footer: {
                type: localStorage.getItem('themeConfig-footerType') || $themeConfig.layout.footer.type,
            },
        },
    },
    getters: {},
    mutations: {
        UPDATE_SKIN(state, skin) {
            state.layout.skin = skin

            localStorage.setItem('themeConfig-skin', skin)

            if (skin === 'dark') document.body.classList.add('dark-layout')
            else if (document.body.className.match('dark-layout')) document.body.classList.remove('dark-layout')
        },

        UPDATE_LAYOUT_TYPE(state, val) {
            localStorage.setItem('themeConfig-menuLayout', val)
            state.layout.type = val
        },
        UPDATE_CONTENT_WIDTH(state, val) {
            localStorage.setItem('themeConfig-contentWidth', val)
            state.layout.contentWidth = val
        },
        UPDATE_NAV_MENU_HIDDEN(state, val) {
            localStorage.setItem('themeConfig-menuHidden', val)
            state.layout.menu.hidden = val
        },
        UPDATE_NAVBAR_CONFIG(state, obj) {
            if (obj.backgroundColor)
                localStorage.setItem('themeConfig-navbarBG', obj.backgroundColor)
            else
                localStorage.setItem('themeConfig-navbarType', obj.type)
            Object.assign(state.layout.navbar, obj)
        },
        UPDATE_FOOTER_CONFIG(state, obj) {
            if (obj.type)
                localStorage.setItem('themeConfig-footerType', obj.type)
            else
                localStorage.setItem('themeConfig-footerType', obj.type)
                Object.assign(state.layout.footer, obj)
        },
    },
    actions: {},
}

I like to work without being tied to a package. I don't want to use package — Liza, Jan 18 '22 at 09:41
@Liza What is the motivation? You could start with reimplementing Vue this way. Any way, vuex-persist or vuex-persistedstate is the answer. If you're willing to reinvent a wheel for some reason, consider checking their source code — Estus Flask, Jan 18 '22 at 10:28
Exactly as Estus says. It is your choice if you use the package directly or you read it's code to learn how to do it yourself. It's not complicated — Michal Levý, Jan 18 '22 at 10:51
Does this answer your question? [How to Store Objects in HTML5 localStorage?](https://stackoverflow.com/questions/2010892/how-to-store-objects-in-html5-localstorage) — Michal Levý, Jan 18 '22 at 10:55

Vitaliy Rayets · Answer 1 · 2022-01-18T11:00:16.333

You can create helper functions like:

function updateThemeConfig (key, data) {
  let state = localStorage.getItem('themeConfig');
  if(state){
    state = JSON.parse(state);
    state[key] = data;
  } else {
    state = {
      [key]: data;
    }
  }
  localStorage.setItem('themeConfig', JSON.stringify(state))
}

function getThemeConfig (key) {
  let state = localStorage.getItem('themeConfig');
  if(state) {
    state = JSON.parse(state);
    return state[key];
  }
  return;
}

Then use it like this:

footer: {
  type: getThemeConfig('footerType') || $themeConfig.layout.footer.type,
},
...
UPDATE_LAYOUT_TYPE(state, val) {
  updateThemeConfig('menuLayout', val); 
  state.layout.type = val
},

vuejs store localStorage set object

1 Answers1