vueuse - useLocalStorage 사용법

VueUse

Collection of essential Vue Composition Utilities

https://vueuse.org/core/useLocalStorage/

Window.localStorage - Web API | MDN

localStorage 읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다. localStorage는 sessionStorage와 비슷하지만, localStorage의 데이터는 만료되지 않고 sessionStorage의 데이터는 페이지 세션이 끝날 때, 즉 페이지를 닫을 때 사라지는 점이 다릅니다. ("사생활 보호 모드" 중 생성한 localStorage 데이터는 마지막 "사생활 보호" 탭이 닫힐 때 지워집니다.)

https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage

localStorage.setItem("myCat", "Tom");

declare function useLocalStorage<T>(key: string, initialValue: MaybeRefOrGetter<T>, options?: UseStorageOptions<T>): RemovableRef<T>;

useLocalStorage(key, initialValue, options);

(key: string, initialValue: MaybeRefOrGetter<string>, options?: UseStorageOptions<string>)

• serializer : 로컬스토리지에 데이터를 저장하거나 가져올 때 사용되는 직렬화 및 역 직렬화 작업을 정의하는 객체이다. → 우리가 사용한 방식을 확인해보면

/** NC 가공 타입 idx */
const ncWorkItemRid = useLocalStorage<NCWork['itemRid']>(StorageKey.NCWorkItemRid, null, { serializer: StorageSerializers.number });

컴퓨터 메모리 상에 존재하는 객체(Object) -> 문자열(string) 로 변환하는 것= 직렬화(Serialization)

문자열(string) -> 자바스크립트 객체(Object)로 반환하는 것= 역직렬화(Deserialization) or 파싱(Parsing)

var youn = {
  name : 'youn',
  age : 31,
  gender : 'male',
  location : 'gunpo',
  marriage : false,
  friends : ['oh', 'Lee', 'bee']
}

var serialize_json = JSON.stringify(youn);

console.log("Serialize 결과 타입 : ", typeof serialize_json);
console.log("Serialize 결과 : ", serialize_json);
 
// Serialize 결과 타입 :  string
// Serialize 결과 :   {"name":"youn","age":31,"gender":"male","location":"gunpo","marriage":false,"friends":["oh","Lee","bee"]}

• target : 저장 대상을 지정하는 객체라고 한다. 기본적으론 localStorage 가 사용되지만 이속성으로 sessionStorage 또는 기타 저장소를 사용할 수 있다고한다.

const ncWorkProjRid = 
useLocalStorage<NCWork['projRid']>
(StorageKey.NCWorkProjRid, null, { serializer: StorageSerializers.number });

• useLocalStorage<NCWork['projRid']>: useLocalStorage 함수를 호출하였고 ncWorkProjRid 변수를 생성한다. 이 변수는 Local Storage에서 NCWork['projRid'] 타입을 같게 된다.

• StorageKey.NCWorkProjRid: 이 변수는 Local Storage의 키 역할을 한다.

• null : null을 위에 키에 초기값으로 설정한다. 키가 존재하지 않으면 대체 된다.

• { serializer: StorageSerializers.number }: 이것은 useLocalStorage 함수의 옵션 이고serializer를 사용하여 데이터가 Local Storage에 저장될 때와 가져올 때 변환 로직을 태울 수 있다. 여기서는 데이터가 숫자로 직렬화 및 역 직렬화된다.