手写 useLocalStorage 时发现的问题？

Question

/**
         * 获取浏览器 localStorage 中的值, 也可对该值进行更新操作
         *
         * @param {String} key---localStorage中存储的键值对的key
         * @return {String} value---localStorage中存储的键值对的value
         * @return {Function} setValue---更新方法,可对localStorage中存储的键值对进行更新操作,本方法接受一个参数,该参数为更新后的值
         *
         * @example
         * const { value: nameValue, setValue: setNameValue } = useLocalStorage('name')
         * console.log(nameValue)
         * setNameValue('uni-app')
         * console.log(nameValue)
         */
        function useLocalStorage(key) {
            // 生成一个代理对象
            const ref = {}
            Object.defineProperty(ref, key, {
                get() {
                    const storage = JSON.parse(localStorage.getItem(key) ?? '')
                    return storage
                },
            })

            function setValue(newVal) {
                localStorage.setItem(key, JSON.stringify(newVal))
            }

            return {
                get value() {
                    return ref[key]
                },
                setValue,
            }
        }

        localStorage.setItem('name', JSON.stringify('uni-app'))
        const { value: nameValue, setValue: setNameValue } = useLocalStorage('name')

        console.log(nameValue) // 'uni-app'
        setNameValue('JavaScript')
        console.log(nameValue) // 这里输出的不是 'JavaScript', 仍然是 'uni-app'

问题就是代码段最后一个输出，不知道为什么还是 "uni-app"

Answer 1

const { value: nameValue, setValue: setNameValue } = useLocalStorage('name')

nameValue是基本类型，而不是引用类型，自然还是'uni-app'

Answer 2

• 使用 setNameValue('JavaScript') 之后 localStorage 中的指已经变为JavaScript, 但是变量nameValue 还没有改变 需要重新 读取之后 才能变化

• 末尾再读取一次之后 再输出

    const { value: nameValue, setValue: setNameValue } = useLocalStorage('name')
    console.log(nameValue) // 'JavaScript'

Answer 3

我发现修改一下使用方式可以达到目标效果，但会给使用增加麻烦

function useLocalStorage(key) {
            // 生成一个代理对象
            const ref = {}
            Object.defineProperty(ref, 'value', {
                get() {
                    const storage = JSON.parse(localStorage.getItem(key) ?? '')
                    return storage
                },
            })

            function setValue(newVal) {
                localStorage.setItem(key, JSON.stringify(newVal))
            }

            return {
                value: ref,
                setValue,
            }
        }

        localStorage.setItem('name', JSON.stringify('uni-app'))
        const { value: nameValue, setValue: setNameValue } = useLocalStorage('name')

        console.log(nameValue.value) // 'uni-app'
        setNameValue('JavaScript')
        console.log(nameValue.value) // 此时这里输出的就是 'JavaScript'

而且如果解构的话，好像是无法触发 get 的：

const obj = {
                count: 1,
                get value() {
                    return obj.count++
                },
            }

            const { count, value } = obj

            console.log(value) // 1
            console.log(value) // 1

            console.log(obj.value) // 2
            console.log(obj.value) // 3