Merge pull request #114 from umijs/featureUseLocalStorageStateSupport…

…Object useLocalStorageState support object,number and boolean
alibaba · Oct 30, 2019 · bd300d6 · bd300d6 · vercel · Oct 30, 2019
2 parents c0b86c8 + 5f4668a
commit bd300d6
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 12 deletions.
diff --git a/src/useLocalStorageState/__tests__/index.test.ts b/src/useLocalStorageState/__tests__/index.test.ts
@@ -7,28 +7,98 @@ describe('useLocalStorageState', () => {
     expect(useLocalStorageState).toBeDefined();
   });
 
-  const setUp = (): any =>
+  const setUp = <T>(key: string, value: T) =>
     renderHook(() => {
-      const [state, setState] = useLocalStorageState('test-key', 'A');
+      const [state, setState] = useLocalStorageState<T>(key, value);
       return {
         state,
         setState,
-      };
+      } as const;
     });
 
   it('getKey should work', () => {
-    const hook = setUp();
+    const LOCAL_STORAGE_KEY = 'test-key';
+    const hook = setUp(LOCAL_STORAGE_KEY, 'A');
     expect(hook.result.current.state).toEqual('A');
     act(() => {
       hook.result.current.setState('B');
     });
     expect(hook.result.current.state).toEqual('B');
-    const anotherHook = setUp();
+    const anotherHook = setUp(LOCAL_STORAGE_KEY, 'A');
     expect(anotherHook.result.current.state).toEqual('B');
     act(() => {
       anotherHook.result.current.setState('C');
     });
     expect(anotherHook.result.current.state).toEqual('C');
     expect(hook.result.current.state).toEqual('B');
   });
+
+  it('should support object', () => {
+    const LOCAL_STORAGE_KEY = 'test-object-key';
+    const hook = setUp<{ name: string }>(LOCAL_STORAGE_KEY, {
+      name: 'A',
+    });
+    expect(hook.result.current.state).toEqual({ name: 'A' });
+    act(() => {
+      hook.result.current.setState({ name: 'B' });
+    });
+    expect(hook.result.current.state).toEqual({ name: 'B' });
+    const anotherHook = setUp(LOCAL_STORAGE_KEY, {
+      name: 'C',
+    });
+    expect(anotherHook.result.current.state).toEqual({ name: 'B' });
+    act(() => {
+      anotherHook.result.current.setState({
+        name: 'C',
+      });
+    });
+    expect(anotherHook.result.current.state).toEqual({ name: 'C' });
+    expect(hook.result.current.state).toEqual({ name: 'B' });
+  });
+
+  it('should support number', () => {
+    const LOCAL_STORAGE_KEY = 'test-number-key';
+    const hook = setUp(LOCAL_STORAGE_KEY, 1);
+    expect(hook.result.current.state).toEqual(1);
+    act(() => {
+      hook.result.current.setState(2);
+    });
+    expect(hook.result.current.state).toEqual(2);
+    const anotherHook = setUp(LOCAL_STORAGE_KEY, 3);
+    expect(anotherHook.result.current.state).toEqual(2);
+    act(() => {
+      anotherHook.result.current.setState(3);
+    });
+    expect(anotherHook.result.current.state).toEqual(3);
+    expect(hook.result.current.state).toEqual(2);
+  });
+
+  it('should support boolean', () => {
+    const LOCAL_STORAGE_KEY = 'test-boolean-key';
+    const hook = setUp(LOCAL_STORAGE_KEY, true);
+    expect(hook.result.current.state).toEqual(true);
+    act(() => {
+      hook.result.current.setState(false);
+    });
+    expect(hook.result.current.state).toEqual(false);
+    const anotherHook = setUp(LOCAL_STORAGE_KEY, true);
+    expect(anotherHook.result.current.state).toEqual(false);
+    act(() => {
+      anotherHook.result.current.setState(true);
+    });
+    expect(anotherHook.result.current.state).toEqual(true);
+    expect(hook.result.current.state).toEqual(false);
+  });
+
+  it('should support null', () => {
+    const LOCAL_STORAGE_KEY = 'test-boolean-key-with-null';
+    const hook = setUp<boolean | null>(LOCAL_STORAGE_KEY, false);
+    expect(hook.result.current.state).toEqual(false);
+    act(() => {
+      hook.result.current.setState(null);
+    });
+    expect(hook.result.current.state).toEqual(null);
+    const anotherHook = setUp(LOCAL_STORAGE_KEY, false);
+    expect(anotherHook.result.current.state).toEqual(null);
+  });
 });
diff --git a/src/useLocalStorageState/index.mdx b/src/useLocalStorageState/index.mdx
@@ -47,7 +47,7 @@ import useLocalStorageState from './index';
 ## API
 
 ```typescript
-function useLocalStorageState<T extends string = string>(
+function useLocalStorageState<T = string>(
   key: string,
   defaultValue?: T,
 ): [T?, (value?: T) => void]

diff --git a/src/useLocalStorageState/index.ts b/src/useLocalStorageState/index.ts
@@ -1,16 +1,15 @@
 import { useState } from 'react';
 
-export default function useLocalStorageState<T extends string = string>(
-  key: string,
-  defaultValue?: T,
-) {
-  const [state, setState] = useState(() => (localStorage.getItem(key) as T) || defaultValue);
+export default function useLocalStorageState<T = string>(key: string, defaultValue?: T) {
+  const [state, setState] = useState(() =>
+    (localStorage.getItem(key) === null ? defaultValue : JSON.parse(localStorage.getItem(key)!)),
+  );
   function updateState(value?: T) {
     if (value === undefined) {
       localStorage.removeItem(key);
       setState(defaultValue);
     } else {
-      localStorage.setItem(key, value as string);
+      localStorage.setItem(key, JSON.stringify(value));
       setState(value);
     }
   }