나는 잠시 동안 useLocalStorage React hook을 dogfood하고 있으며 어제 npm에서 uselocalstorage package 으로 오픈 소스했습니다.

오픈 소스에 기여하는 데 관심이 있습니까? 그렇다면 경험 수준에 관계없이 도움을 찾고 있습니다!

처음 참여자를 환영합니다!

관심이 있으시면 follow the GitHub repo here 미해결 문제를 확인하십시오.

이 게시물 💓, 🦄, 🔖을 제공하여 노력을 키울 수 있도록 도와주세요!

후크 정보

useLocalStorage 후크는 useState 후크와 매우 유사하게 작동하지만, 상태 저장 데이터를 브라우저의 로컬 저장소에 유지한다는 점만 다릅니다. 후크는 JavaScript 및 Typescript에서 사용할 수 있습니다.

예, 대안이 있습니다!

나는 이 패키지에 대한 대안, 심지어 좋은 대안이 있다는 것을 잘 알고 있습니다! 즉, 경쟁을 통해 최고의 솔루션이 정상에 오를 수 있기 때문에 무언가를 구축하려는 더 많은 시도가 더 좋을 수 있다고 믿습니다.

내가 찾고 있는 도움말

Github Issues Page 에서 도움을 찾고 있는 다양한 작업을 설명하기 시작했습니다. 지금까지 내가 가지고있는 것은 다음과 같습니다.

추가 CONTRIBUTING.md

추가 CODE_OF_CONDUCT.md

"storage" 창 이벤트 리스너를 사용하여 다른 탭에서 동기화 문제를 방지합니다.

후크를 사용하여 더 많은 기능을 제안하십시오!

이들 중 일부는 약간의 React/Typescript 경험이 필요할 수 있지만 나머지는 마찬가지로 중요하고 누구나 도울 수 있는 관리 지원입니다!

설치

npm으로 설치

npm i use-local-storage

원사로 설치

yarn add use-local-storage

기본 사용법

가장 기본적인 형태의 useLocalStorage 후크는 사용하려는 로컬 저장소key만 있으면 됩니다. 그러나 기본값key이 아직 로컬 저장소에 없는 경우 두 번째 인수로 기본값을 제공하는 것이 좋습니다.

다음 사용법은 로컬 저장소의 username 키에서 "name" 변수를 유지합니다. 빈 문자열""의 기본값/초기 값을 갖습니다. 이 기본값은 로컬 저장소에 이미 값이 없는 경우에만 사용됩니다.

import useLocalStorage from "use-local-storage";

function MyComponent() {
  const [username, setUsername] = useLocalStorage("name", "");

  return (
    <>
      <input
        value={username}
        onChange={(e) => {
          setUsername(e.target.value);
        }}
      />
    </>
  );
}

참고: 기본적으로 useLocalStorage 후크는 JSON.stringify 및 JSON.parse를 사용하여 데이터를 각각 직렬화하고 구문 분석합니다. 원하는 경우 사용자 지정 직렬 변환기 및/또는 파서를 구성할 수 있습니다(아래 고급 사용 섹션에서 설명).

타이프스크립트 사용

username 유형은 기본값에서 유추됩니다. 이 경우 string의 유형이 유추됩니다.

기본값을 제공하지 않고 useLocalStorage를 사용하거나 단순히 username가 실제로 다른 유형임을 지정하려는 경우 데이터 유형을 제네릭으로 전달해야 합니다.

import useLocalStorage from "use-local-storage";

function MyComponent() {
  const [username, setUsername] = useLocalStorage<string>("name");

  return (
    <>
      <input
        value={username}
        onChange={(e) => {
          setUsername(e.target.value);
        }}
      />
    </>
  );
}

고급 사용법 / 옵션

useLocalStorage 후크는 선택적 세 번째options 인수를 사용합니다. JSON.stringify 및 JSON.parse 이외의 것을 사용해야 하는 경우 사용자 지정 직렬 변환기 및/또는 파서를 구성할 수 있습니다. options 개체에는 후크에서 발견된 오류를 기록하는 logger 키도 있습니다.

const options = {
  serializer: (obj) => {
    /* Serialize logic */
    return someString;
  },
  parser: (str) => {
    /* Parse logic */
    return parsedObject;
  },
  logger: (error) => {
    // Do some logging
  },
};

const [data, setData] = useLocalStorage("data", { foo: "bar" }, options);

속성

DinosoftLabs 에서 www.flaticon.com이 만든 스토리지 아이콘