useStorage serializer 'read' does not work when the value can be parsed as a number.

[green-mike]

Describe the bug

When the storage stores '100' (as a string), upon reloading the page, the retrieved value from storage becomes 100 (as a number).

In the context of Nuxt SSR, using useStorage along with ssrHandler stores data in cookies. However, when the stored data is a number, accessing it through "storage!.getItem(key)" automatically converts it to a number, whereas the required data type is a string.

Although StorageSerializers.string has been configured for conversion, inspecting the source code reveals that when the type is not a string, serializers.read is not executed, resulting in a type error in the end.

value is number already.

vueuse/packages/core/useStorage/index.ts

Lines 231 to 255 in 1558cd2

	function read(event?: StorageEventLike) {
	const rawValue = event
	? event.newValue
	: storage!.getItem(key)
	if (rawValue == null) {
	if (writeDefaults && rawInit != null)
	storage!.setItem(key, serializer.write(rawInit))
	return rawInit
	}
	else if (!event && mergeDefaults) {
	const value = serializer.read(rawValue)
	if (typeof mergeDefaults === 'function')
	return mergeDefaults(value, rawInit)
	else if (type === 'object' && !Array.isArray(value))
	return { ...rawInit as any, ...value }
	return value
	}
	else if (typeof rawValue !== 'string') {
	return rawValue
	}
	else {
	return serializer.read(rawValue)
	}
	}

vueuse/packages/core/useStorage/index.ts

Line 249 in 1558cd2

else if (typeof rawValue !== 'string') {

getItem is number

vueuse/packages/nuxt/ssr-plugin.mjs

Lines 4 to 16 in 1558cd2

	setSSRHandler('getDefaultStorage', () => {
	const cookieMap = new Map()
	const get = (key) => {
	if (!cookieMap.get(key))
	cookieMap.set(key, useCookie(key, { maxAge: 2147483646 }))
	return cookieMap.get(key)
	}
	return {
	getItem: key => get(key).value,
	setItem: (key, value) => get(key).value = value,
	removeItem: key => get(key).value = undefined,
	}
	})

Reproduction

https://stackblitz.com/edit/github-rwbaw3?file=app.vue

System Info

Because the issue with cookies cannot be reproduced on StackBlitz. You can download it and run it locally to see the situation.

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.