feat(react): 新增 useLocalStorage

src/react/index.ts

@@ -8,7 +8,7 @@
 
 export * from 'react-use'
 
-// @index(['./**/*.ts', '!./**/*.{test,taro}.*', '!./{useToggle,createGlobalState,useTitle,useInterval,useSearchParam}.*'], f => `export * from '${f.path}'`)
+// @index(['./**/*.ts', '!./**/*.{test,taro}.*', '!./{useToggle,createGlobalState,useTitle,useInterval,useSearchParam,useLocalStorage}.*'], f => `export * from '${f.path}'`)
 export * from './useClassName'
 export * from './useLoadMore'
 export * from './useReachBottom'
@@ -28,3 +28,4 @@ export {
 export { useTitle } from './useTitle'
 export { useInterval, UseIntervalResult } from './useInterval'
 export { useSearchParam } from './useSearchParam'
+export { useLocalStorage } from './useLocalStorage'

src/react/useLocalStorage.taro.test.ts

@@ -0,0 +1,39 @@
+import * as Taro from '@tarojs/taro'
+import { act, renderHook } from '@testing-library/react-hooks'
+
+describe('useLocalStorage', () => {
+  const storage: Record<any, any> = {}
+
+  beforeAll(() => {
+    jest.mock(
+      '@tarojs/taro',
+      () =>
+        ({
+          getStorageSync: key => {
+            return storage[key]
+          },
+          removeStorage: payload => {
+            delete storage[payload.key]
+          },
+          setStorage: payload => {
+            storage[payload.key] = payload.data
+          },
+        } as typeof Taro),
+    )
+  })
+
+  test('表现正常', async () => {
+    const { useLocalStorage } = await import('./useLocalStorage.taro')
+    const { result: resx } = renderHook(() => useLocalStorage<string>('x'))
+    expect(resx.current[0]).toBe(undefined)
+    act(() => resx.current[1]('1'))
+    expect(resx.current[0]).toBe('1')
+    act(() => resx.current[1](prev => `${prev}_2`))
+    expect(resx.current[0]).toBe('1_2')
+    act(() => resx.current[2]())
+    expect(resx.current[0]).toBe(undefined)
+
+    const { result: resy } = renderHook(() => useLocalStorage('y', 5))
+    expect(resy.current[0]).toBe(5)
+  })
+})

src/react/useLocalStorage.taro.ts

@@ -0,0 +1,35 @@
+import { useLocalStorage as _useLocalStorage, useUpdateEffect } from 'react-use'
+import { getStorageSync, removeStorage, setStorage } from '@tarojs/taro'
+import { useCallback, useState } from 'react'
+
+export const useLocalStorage: typeof _useLocalStorage = (
+  key,
+  initialValue,
+  // 忽略选项
+  _options,
+) => {
+  const [value, setValue] = useState<ReturnType<typeof _useLocalStorage>[0]>(
+    () => getStorageSync(key) || initialValue,
+  )
+  useUpdateEffect(() => {
+    setValue(getStorageSync(key) || initialValue)
+  }, [key])
+  const set: ReturnType<typeof _useLocalStorage>[1] = useCallback(
+    valueOrSetter => {
+      if (typeof valueOrSetter === 'function') {
+        valueOrSetter = valueOrSetter(value)
+      }
+      setStorage({
+        key: key,
+        data: valueOrSetter,
+      })
+      setValue(valueOrSetter)
+    },
+    [key, value],
+  )
+  const remove: ReturnType<typeof _useLocalStorage>[2] = useCallback(() => {
+    removeStorage({ key })
+    setValue(undefined)
+  }, [key])
+  return [value as any, set, remove]
+}

src/react/useLocalStorage.ts

@@ -0,0 +1,2 @@
+/* istanbul ignore file */
+export { useLocalStorage } from 'react-use'