Global contants for default keys

src/components/LinkItems/Collapsable.vue

@@ -22,6 +22,9 @@
 </template>
 
 <script>
+
+import { localStorageKeys } from '@/utils/defaults';
+
 export default {
   name: 'CollapsableContainer',
   props: {
@@ -52,14 +55,17 @@ export default {
     },
     /* If not already done, then add object structure to local storage */
     initialiseStorage() {
-      const initStorage = () => localStorage.setItem('collapseState', JSON.stringify({}));
-      if (!localStorage.collapseState) initStorage(); // If not yet set, then init localstorage
+      /* Initialize function will create and set a blank object to storage */
+      const initStorage = () => localStorage.setItem(
+        localStorageKeys.COLLAPSE_STATE, JSON.stringify({}),
+      );
+      if (!localStorage[localStorageKeys.COLLAPSE_STATE]) initStorage(); // Initialise if not set
       try { // Check storage is valid JSON, and has not been corrupted
-        JSON.parse(localStorage.collapseState);
+        JSON.parse(localStorage[localStorageKeys.COLLAPSE_STATE]);
       } catch {
         initStorage();
       }
-      return JSON.parse(localStorage.collapseState);
+      return JSON.parse(localStorage[localStorageKeys.COLLAPSE_STATE]);
     },
     getCollapseState() {
       const collapseStateObject = this.initialiseStorage();
@@ -71,11 +77,11 @@ export default {
     },
     setCollapseState(id, newState) {
       // Get the current localstorage collapse state object
-      const collapseState = JSON.parse(localStorage.collapseState);
+      const collapseState = JSON.parse(localStorage[localStorageKeys.COLLAPSE_STATE]);
       // Add the new state to it
       collapseState[id] = newState;
       // Stringify, and set the new object into local storage
-      localStorage.setItem('collapseState', JSON.stringify(collapseState));
+      localStorage.setItem(localStorageKeys.COLLAPSE_STATE, JSON.stringify(collapseState));
     },
     collapseChanged(whatChanged) {
       this.initialiseStorage();

src/components/PageStrcture/Header.vue

@@ -8,7 +8,7 @@
 <script>
 import PageTitle from '@/components/PageStrcture/PageTitle.vue';
 import Nav from '@/components/PageStrcture/Nav.vue';
-import Defaults from '@/utils/defaults';
+import { visibleComponents } from '@/utils/defaults';
 
 export default {
   name: 'Header',
@@ -21,8 +21,9 @@ export default {
   },
   data() {
     return {
-      titleVisible: Defaults.visibleComponents.pageTitle,
-      navVisible: Defaults.visibleComponents.navigation,
+      hiddenComponents: this.pageInfo.hiddenComponents || {},
+      titleVisible: visibleComponents.pageTitle,
+      navVisible: visibleComponents.navigation,
     };
   },
 };

src/components/Settings/KeyboardShortcutInfo.vue

@@ -13,6 +13,9 @@
 </template>
 
 <script>
+
+import { localStorageKeys } from '@/utils/defaults';
+
 export default {
   name: 'KeyboardShortcutInfo',
   data() {
@@ -27,7 +30,7 @@ export default {
      * Note the !! just converts 'false' to false, as strings resolve to true
      */
     shouldHideWelcomeMessage() {
-      return !!localStorage.hideWelcomeHelpers;
+      return !!localStorage[localStorageKeys.HIDE_WELCOME_BANNER];
     },
     /**
      * Update session storage, so that it won't be shown again
@@ -35,7 +38,7 @@ export default {
      */
     hideWelcomeHelper() {
       this.shouldHide = true;
-      localStorage.setItem('hideWelcomeHelpers', true);
+      localStorage.setItem(localStorageKeys.HIDE_WELCOME_BANNER, true);
       window.removeEventListener('keyup');
     },
   },

src/components/Settings/ThemeSelector.vue

@@ -13,7 +13,7 @@
 <script>
 
 import ThemeHelper from '@/utils/ThemeHelper';
-import Defaults from '@/utils/defaults';
+import Defaults, { localStorageKeys } from '@/utils/defaults';
 
 export default {
   name: 'ThemeSelector',
@@ -47,7 +47,7 @@ export default {
     if (this.isThemeLocal(this.selectedTheme)) {
       this.updateTheme(this.selectedTheme);
     // If it's an external stylesheet, then wait for promise to resolve
-    } else if (this.selectedTheme !== 'Default') {
+    } else if (this.selectedTheme !== Defaults.theme) {
       Promise.all(added).then(() => {
         this.updateTheme(this.selectedTheme);
       });
@@ -61,7 +61,7 @@ export default {
     },
     /* Get default theme */
     getInitialTheme() {
-      return localStorage.theme || this.confTheme || Defaults.defaultTheme;
+      return localStorage[localStorageKeys.THEME] || this.confTheme || Defaults.theme;
     },
     isThemeLocal(themeToCheck) {
       return this.builtInThemes.includes(themeToCheck);
@@ -77,7 +77,7 @@ export default {
       } else {
         this.themeHelper.theme = newTheme;
       }
-      localStorage.setItem('theme', newTheme);
+      localStorage.setItem(localStorageKeys.THEME, newTheme);
     },
     resetToDefault() {
       document.getElementsByTagName('html')[0].removeAttribute('data-theme');