前端 自定义网址功能 localStorage 本地存储？

Posted 2023-03-21

参考技术A 是的，localStorage是本地存储。
本地存储可以在浏览器本地存储一些需要长期存储的数据，除非做清除操作，否则会长期存储在本地供本域名下的程序使用。相对于以前的cookie来说，存储容量更大，而且请求服务器的时候不会随请求头一起传输。
另外，html5还新增了sessionStorage，即会话存储，在浏览器不关闭的情况下和localStorage有相似之处，但仅作用于本次会话。

实现一个自定义 React Hook：useLocalStorageState

参考技术A 大家好，我是前端西瓜哥。

最近做需求，需要将数据保存到 localStorage 里，在组件初始化的时候获取，然后修改该值的时候，要保存到本地的 localStorage 中。

倒是并不难。

很显然，这些逻辑完全可以封装为一个 React Hook，名字很容易想到为 useLocalStorageState。

逻辑并不复杂。就是在读和写的时候，加上 localStorage 的读写逻辑就好了。

用法如下：

其实这个实现还是比较粗糙的，只支持字符串格式，如果你要保存对象，需要自己手动 JSON.parse 和 JSON.stringify 来扩展了数据类型的范围。

我们可以加一下序列化和反序列化支持：

另外，JSON 序列化和反序列方法如果不够用，我们可以再加个自定义序列反序列化方法：

其实优秀的第三方 React Hook 库 ahooks 也有这个实现，我还是建议大家用一些比较成熟的轮子，我这里只是提供一下思路。

ahooks 的 useLocalStorageState 的源码：

https://github.com/alibaba/hooks/blob/v3.4.0/packages/hooks/src/useLocalStorageState/index.ts