vueuse: [bug] useStorage default value `null` get's written to localstorage and read as `"null"`

If you set null as the default value of useStorage, this value get’s written to the localStorage on initial execution and is then read as the string "null". This behaviour was most likely introduced with #528 and I suspect it isn’t intended. All versions >=4.11.1 are affected.

Example:

import { useStorage } from "@vueuse/core";
const test = useStorage("key", null);
console.log("Key:", typeof test.value, test.value);

// First load (expected behaviour)
// > Key: object null
// Subsequent loads (broken)
// > Key: string "null"

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 2
Comments: 21 (12 by maintainers)

Most upvoted comments

Right – I don’t want to store null (and you are correct, localStorage is key (string) / value (string)

So again, if a user passes null it should NEVER be converted to a string and stored as "null"

So something definitely needs to be changed/updated.

adamdehaven on Jul 22, 2021

Wait ok I think I didn’t completely fix the issue in my pull request - I didn’t realize that there was useStorage and useLocalStorage I think I only fixed for useStorage not the other one. Just to clarify @antfu whats supposed to be the difference between the two? I’ll pull request a fix for useLocalStorage as well thanks for bringing this up

jeffrey-dot-li on Jul 22, 2021