store

store

설치

$> npm install store
$> yarn add store

npm 링크

store

store

yarn 링크

Contributors

https://yarnpkg.com/package/store

용례

로컬 스토리지는 데이터가 문자열 타입만 지원되기 때문에, 다른 타입 저장이 조금 귀찮다

그 때문에 대개 데이터를 객체 형식으로 정리한 후 JSON 형태로 직렬화 (serialization) 를 거쳐 JSON 문자열로 저장하고, 값을 사용할 때는 역직렬화 (deserealization) 후 객체로 돌려놓는 방식을 사용한다

그렇다는 것은 일일히 JSON ↔ string 변환을 해 주어야 하고, 가끔 로컬 스토리지에 값이 제대로 저장되지 않았다던가 이전에 저장한 값이 잘못된 형식으로 남아 있는 등 변환 과정 시에 Unexpected token o 와 같은 이상한 오류를 만날 수도 있다

store 라이브러리를 사용하면 로컬 스토리지 사용이 한결 편해진다

로컬 스토리지에 값 저장하기

store.set(key, data);

key라는 이름으로 data를 저장한다

store('storageData', {
    Movies: [],
    imdbIDs: [],
});

로컬 스토리지에 값이 잘 저장된 것을 볼 수 있다

localStorage.setItem(key) 와 비슷한 역할을 한다

로컬 스토리지에서 값 가져오기

store.get(key);

값을 가져오는 것도 간단하다

사전에 설정했던 키를 넣기만 하면 된다

localStorage.getItem(key) 와 비슷한 역할을 한다

특정 키의 값 삭제

store.remove(key);

해당 키로 저장된 값을 삭제한다

store.remove(key);
const temp = store.get(key);
console.log(temp);

삭제한 값을 불러오려고 하면 undefined로 저장된다

localStorage.removeItem(key) 와 같은 역할을 한다

스토리지 내 모든 값 삭제

store.clearAll();

store.remove와 마찬가지로 해당 함수를 실행시키고 get을 시도하면 undefined가 반환되는 것을 볼 수 있다

localStorage.clear() 과 같은 역할을 한다

장점

스토리지를 사용해서 값을 저장할 때 JSON.stringify 등 추가적인 작업을 할 필요가 없다

(본인이 직접 플러그인을 작성해 추가하면 모를까) 라이브러리에 기능이 그렇게 다양하지 않고, 함수명이 직관적인 편이라 손 대기도 쉽다

단점

문서화가... 잘 안 되어 있는 것 같다

사용자가 굉장히 많은 라이브러리임에도 불구하고 (star가 13000개다) 검색하면 리덕스 관련 내용만 나와서 예제를 찾기가 애매하다..

참고 자료

https://github.com/marcuswestin/store.js

GitHub - marcuswestin/store.js: Cross-browser storage for all use cases, used across the web.