replace localstorage with cookies

src/app/components/Header/ChartToggle.vue

@@ -1,6 +1,6 @@
 <template>
   <Toggle
-    v-model:pressed="globalStore.uiShowCharts"
+    :pressed="globalStore.uiShowCharts"
     class="group inline-flex h-8 w-8 cursor-pointer items-center justify-center whitespace-nowrap rounded-full bg-gray-200 transition hover:bg-gray-300 dark:bg-neutral-700 dark:hover:bg-neutral-600"
     :title="$t('layout.toggleCharts')"
     @update:pressed="globalStore.toggleCharts"

src/app/stores/global.ts

@@ -5,15 +5,19 @@ export const useGlobalStore = defineStore('Global', () => {
 
   const sortClient = ref(true); // Sort clients by name, true = asc, false = desc
 
-  // TODO: migrate to cookies
+  const uiShowCharts = useCookie<boolean>('uiShowCharts', {
-
+    default: () => false,
-  const uiShowCharts = ref(getItem('uiShowCharts') === '1');
+    maxAge: 365 * 24 * 60 * 60,
+  });
 
   function toggleCharts() {
-    setItem('uiShowCharts', uiShowCharts.value ? '1' : '0');
+    uiShowCharts.value = !uiShowCharts.value;
   }
 
-  const uiChartType = ref(getItem('uiChartType') ?? 'area');
+  const uiChartType = useCookie<'area' | 'bar' | 'line'>('uiChartType', {
+    default: () => 'area',
+    maxAge: 365 * 24 * 60 * 60,
+  });
 
   return {
     sortClient,

src/app/utils/localStorage.ts

@@ -1,27 +0,0 @@
-export type LocalStorage = {
-  uiShowCharts: '1' | '0';
-  uiChartType: 'area' | 'bar' | 'line';
-};
-
-export function getItem<K extends keyof LocalStorage>(
-  item: K
-): LocalStorage[K] | null {
-  if (import.meta.client) {
-    return localStorage.getItem(item) as LocalStorage[K] | null;
-  } else {
-    return null;
-  }
-}
-
-export function setItem<K extends keyof LocalStorage>(
-  item: K,
-  value: LocalStorage[K]
-) {
-  if (import.meta.client) {
-    localStorage.setItem(item, value);
-
-    return true;
-  } else {
-    return false;
-  }
-}