JavaScript locarstorage,sessionStorage 사용 경험

배경

지금 회사에서는 오픈소스로 만든 어드민 코드를 사용한다. 그 어드민을 사용한 이유는 어려운 오픈소스가아닌 우리에게 도움을 주시는 개발자가 만든 코드여서 수정및 기능 개선을 요청할 수 있기 때문에 해당 코드를 사용했다.

그런데..

우리 회사의 오프라인 매장,센타 등 기부를 등록하는 곳을 등록처 라 부른다 해당 어드민에 조직도 기능이 있고 이 기능은 조직도당 하나의 등록처를 갖는다

한 역할이 여러 등록처를 관리해야하는 문제가 발생했다.

그래서..

복수의 등록처를 갖은 회원은 등록처를 선택할 수 있도록 수정하는 작업을 맡았다.

수정내용

getter setter 관련해서 쓴 글에서 에서 로그인 했으때 회원 정보를 가져온다. 이때 이 회원은 어드민 관리자로 주로 role ,permmision 등 가져오는데 이떄 siteCode를 가져올 수 있다.

문제는 기존 시스템에서는 복수의 siteCode 를 받아오기 떄문에 이중 1개만 받아서 저장할 곳이 필요했다. 또한 여러개 siteCode 목록중에서 1개만 선택시 저장할 곳이 필요했다.

다시 해당정보를 서버로 보내 저장할지 아니면 브라우저에 저장할지 고민했고 최소수정을 위해 브라우저에 저장하기로 했다.

이때 사용한 localstore 는 뭐지?

localStorage 에 값을 추가한다. window.localStorage.setItem(key값,value 값)

const memberResponse = await axios.get(API_URL + "/members");
let site = Object.keys(memberResponse.data).includes("siteCodes")?memberResponse.data.siteCodes[0] :""
window.localStorage.setItem("siteCode",site ?site.code:site)
MemberContext.memberInformation = memberResponse.data;

localStorage 에 값을 가져온다. window.localStorage.setItem(key값,value값) 그리고 적용된 siteCode를 사용하기 위해서 history.go(0)를 써서 새로고침했다.

<Select
    defaultValue={window.localStorage.getItem("siteCode")}
    style={{width: 160 ,marginRight:10}}
    onChange={(value)=>{
        window.localStorage.setItem("siteCode",value)
        history.go(0);
}}>
    {MemberContext.memberInformation.siteCodes.map((site) =>
        <Select.Option key={site.code} value={site.code}>{site.name}</Select.Option>)
    }
</Select>

20220815

실제로 localStorage 를 적용해보니 매장에서 새로그침을 해도 저장한 값이 지워지지 않아서 문제를 격었다 결국 다시 코드를 수정해 sessionStorage 를 사용했다

둘을 비교해 보면...

0. 두개 모두 브라우저에 저장
1. localStorage 는 브라우저가 종료되어도 남음
2. sessionStorage 는 브라우저가 종료되면 사라짐

이후 알게된 것은 sessionStorage 에 저장하는 방법보다 react 를 사용하니 더 나아가 react-cookies 를 사용해서 저장할 수 있다

참고

http://daplus.net/javascript-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%B0%BD-%ED%83%AD%EC%9D%84-%EB%8B%AB%EC%9D%84-%EB%95%8C-localstorage-%ED%95%AD%EB%AA%A9%EC%9D%84-%EC%82%AD%EC%A0%9C%ED%95%98%EB%8A%94-%EB%B0%A9/ https://www.daleseo.com/js-web-storage/ https://coding-restaurant.tistory.com/264 https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage