[JS] sessionStorage를 사용한 언어 변경하기?

회사 홈페이지를 리뉴얼하던 중 Language select를 개발하던 중이었다.

Language라는 상태를 전체 상태로 생성하였고,
모든 컴포넌트에서 해당 상태가 변경될 때 언어가 바뀌게 적용되게 개발하던 중...

한 가지 궁금증이 생겼고,,,

1. 새로 고침하게 되면, Language 상태가 새로 고침 될 텐데?
2. 그러면 브라우저에 값을 저장하고 그 값을 보는 localStorage를 쓰면 되겠다!
3. 그런데, localStorage를 쓰면 다시 접속해도 전 상태 값을 계속 보게 되겠네?
4. 그러면 웹사이트를 종료하기 전까지만 값을 저장하는 sessionStorage를 써야겠다!

생각을 흐름을 따라 sessionStorage라는 결론을 내렸다.

생각했던 대로 잘 동작하였고, 이에 따라 localStorage와 sessionStorage의 개념과,
코드 적용 예제를 정리해 보려 한다.

---

💾 localStorage & sessionStorage

웹 스토리지 객체(web storage object)인 localStorage와 sessionStorage는 브라우저 내에 키-값 쌍을 저장할 수 있게 해준다.

다음과 같이 localStorage와 sessionStorage에 test라는 키에 각 값을 저장할 수 있다.

localStorage.setItem('test', 'Hello localStorage!');
sessionStorage.setItem('test', 'Hello sessionStorage!');

그리고, 아래처럼 값을 불러올 수 있다.

console.log(localStorage.getItem('test')); // Hello localStorage!
console.log(sessionStorage.getItem('test')); // Hello sessionStorage!

그렇다면, localStorage와 sessionStorage의 차이점은 무엇인가?

• localStorage
  • 오리진이 같은 경우 데이터는 모든 탭과 창에서 공유된다.
  • 브라우저나 OS가 재시작하더라도 데이터가 파기되지 않는다.
    • 브라우저를 닫고 다시 열어도 console.log(localStorage.getItem('test'));를 하면, 위의 값을 얻을 수 있다.

• sessionStorage
  • sessionStorage는 현재 떠 있는 탭 내에서만 유지된다.
  • 페이지를 새로 고침할 때 sessionStorage에 저장된 데이터는 사라지지 않는다. 하지만 탭을 닫고 새로 열 때는 사라진다.
    • 브라우저를 닫고 다시 열었을 때 console.log(sessionStorage.getItem('test'));는 undefined값을 표출한다.

---

💾 sessionStorage React에서 사용하기

// AppLayout.js - ①
useEffect(() => {
  const initialLanguage = sessionStorage.getItem('language');
  setLanguage(initialLanguage || 'korea');
}, []); // - ②

useEffect(() => {
  sessionStorage.setItem('language', language);
}, [language]); // - ③

1. 모든 페이지에서 공통으로 쓰이는 컴포넌트에 코드를 작성한다.
2. 처음 React가 웹브라우저에 로딩되었을 때 혹은 새로 고침을 할 때 sessionStorage에 language키의 값이 있는지 확인한 후 없다면 'korea'로 초깃값을 저장한다.
3. 그 후, React의 전체 상태인 language의 값이 변경될 때마다, sessionStorage에도 업데이트해준다.

---

혹시 내용에 오류가 있다면 피드백 부탁드립니다. 🙇🏻‍♀️

[참고]

• https://ko.javascript.info/localstorage