VueHooks Plus中useLocalStorageState的序列化问题解析

背景介绍

在使用VueHooks Plus的useLocalStorageState钩子时，开发者可能会遇到一个常见问题：存储在localStorage中的普通数值会被自动加上双引号。这与直接使用原生localStorage.setItem方法的行为有所不同，可能会引起一些困惑。

问题现象

当使用useLocalStorageState存储普通值时，例如数字或布尔值，这些值会被转换为带有双引号的字符串形式存储在localStorage中。例如，存储数字123会变成"123"。

而直接使用原生localStorage.setItem方法时，虽然值最终也会被转换为字符串，但不会额外添加双引号。例如，存储字符串"bbb"就保持为bbb。

技术原理

这种差异源于useLocalStorageState内部默认使用了JSON.stringify进行序列化处理。JSON.stringify方法会将所有值（包括数字、布尔值等）转换为JSON格式的字符串表示，这就解释了为什么数值会带上双引号。

相比之下，原生localStorage.setItem方法只是简单地将值转换为字符串，不进行额外的JSON格式化处理。

解决方案

VueHooks Plus提供了serializer和deserializer选项来自定义序列化和反序列化行为，开发者可以通过这些选项来解决双引号问题：

1. 对于简单的字符串存储，可以自定义serializer直接返回原始值
2. 对于需要保持类型的数据，可以结合JSON.parse和JSON.stringify使用
3. 也可以完全自定义序列化逻辑以满足特定需求

最佳实践建议

1. 明确数据类型需求：如果需要保持数据类型（如数字、布尔值等），建议接受JSON序列化带来的双引号
2. 仅处理字符串：如果只处理字符串数据，可以简化序列化逻辑
3. 保持一致性：在整个项目中采用统一的序列化策略，避免混用不同方法导致数据格式不一致

总结

理解useLocalStorageState的序列化行为对于正确使用这个钩子非常重要。虽然默认的JSON序列化行为可能会带来一些表面上的不一致，但这种设计实际上提供了更强大的数据类型支持。开发者可以根据具体需求选择合适的序列化策略，平衡数据类型保持和存储格式简洁性之间的关系。