feat(useStorage): mergeDefaults option

packages/core/useStorage/index.test.ts

@@ -331,4 +331,21 @@ describe('useStorage', () => {
 
     expect(storage.removeItem).toBeCalledWith(KEY)
   })
+
+  it('mergeDefaults option', async () => {
+    // basic
+    storage.setItem(KEY, '0')
+    const basicRef = useStorage(KEY, 1, storage, { mergeDefaults: true })
+    expect(basicRef.value).toBe(1)
+
+    // object
+    storage.setItem(KEY, JSON.stringify({ a: 1 }))
+    const objectRef = useStorage(KEY, { a: 2, b: 3 }, storage, { mergeDefaults: true })
+    expect(JSON.stringify(objectRef.value)).toBe(JSON.stringify({ a: 2, b: 3 }))
+
+    // array
+    storage.setItem(KEY, JSON.stringify([1]))
+    const arrayRef = useStorage(KEY, [2], storage, { mergeDefaults: true })
+    expect(JSON.stringify(arrayRef.value)).toBe(JSON.stringify([1, 2]))
+  })
 })

packages/core/useStorage/index.ts

@@ -75,6 +75,13 @@ export interface UseStorageOptions<T> extends ConfigurableEventFilter, Configura
    */
   writeDefaults?: boolean
 
+  /**
+   * Merge the default value to the storage
+   *
+   * @default false
+   */
+  mergeDefaults?: boolean
+
   /**
    * Custom data serialization
    */
@@ -121,6 +128,7 @@ export function useStorage<T extends(string | number | boolean | object | null)>
     deep = true,
     listenToStorageChanges = true,
     writeDefaults = true,
+    mergeDefaults = false,
     shallow,
     window = defaultWindow,
     eventFilter,
@@ -186,6 +194,13 @@ export function useStorage<T extends(string | number | boolean | object | null)>
           storage!.setItem(key, serializer.write(rawInit))
         return rawInit
       }
+      else if (!event && mergeDefaults) {
+        if (type === 'object') {
+          const value = serializer.read(rawValue)
+          return Array.isArray(value) ? [...value, ...<[]>rawInit] : { ...value, ...<object>rawInit }
+        }
+        return rawInit
+      }
       else if (typeof rawValue !== 'string') {
         return rawValue
       }