task 23 done

Author: serhii-chernenko

src/composables/useLocalStorage.ts

@@ -1,3 +1,29 @@
-export function useLocalStorage(key, defaultValue) {
-    return defaultValue
+import type { Ref } from 'vue'
+import { shallowRef, watchEffect, toValue, onMounted, onUnmounted } from 'vue'
+
+export const useLocalStorage = (
+    key: string,
+    defaultValue: string,
+): Ref<string> => {
+    const value = shallowRef<string>(localStorage.getItem(key) ?? defaultValue)
+
+    watchEffect(() => localStorage.setItem(key, toValue(value)))
+
+    const listener = (event: StorageEvent) => {
+        if (event.key !== key) {
+            return
+        }
+
+        value.value = event.newValue ?? defaultValue
+    }
+
+    onMounted(() => {
+        window.addEventListener('storage', listener)
+    })
+
+    onUnmounted(() => {
+        window.removeEventListener('storage', listener)
+    })
+
+    return value
 }

tests/useLocalStorage.spec.ts

@@ -1,25 +1,51 @@
 import { describe, it, expect, beforeEach } from 'vitest'
+import { createApp } from 'vue'
 import { useLocalStorage } from '../src/composables/useLocalStorage'
 
 const storageKey = 'test'
 
-describe('useLocalStorage', () => {
-    beforeEach(function () {
-        localStorage.clear()
+const withSetup = (composable) => {
+    let result
+    const app = createApp({
+        setup() {
+            result = composable()
+
+            return () => {}
+        },
     })
+
+    app.mount(document.createElement('div'))
+
+    return [result, app]
+}
+
+beforeEach(() => localStorage.clear())
+
+describe('useLocalStorage', () => {
     it('should work w/ default value', () => {
-        const storage = useLocalStorage(storageKey, 'default')
+        const [storage, app] = withSetup(() => {
+            return useLocalStorage(storageKey, 'default')
+        })
+
         expect(storage.value).toBe('default')
         expect(localStorage.getItem(storageKey)).toBe('default')
+
+        app.unmount()
     })
 
     it('should work w/ storage event', () => {
-        const storage = useLocalStorage(storageKey, 'default')
+        const [storage, app] = withSetup(() => {
+            return useLocalStorage(storageKey, 'default')
+        })
         const storageEvent = new StorageEvent('storage', {
             key: storageKey,
             newValue: 'new value',
         })
+
         window.dispatchEvent(storageEvent)
+
         expect(storage.value).toBe('new value')
+
+        app.unmount()
     })
 })