[JavaScript] 자바스크립트에서 localStorage 사용하기

237_자바스크립트에서 localStorage  사용하기

[적용]

• 데이터를 브라우저에 영구 보존하고 싶을 때

---

[문법]

메소드	의미	반환
localStorage.setItem('myParam', data)	localStorage에 저장	없음
localStorage.getItem('myParam')	localStorage에서 불러오기	문자열

---

[내용]

localStorage는 브라우저에 데이터를 간단하게 저장할 수 있다.

window 객체에 localStorage 객체가 있으므로 위치에 상관없이 사용할 수 있으며,

localStorage에 저장된 데이터는 기간 제한이 없다.

 

setItem()을 사용해 데이터를 저장하며, 첫 번째 인수는 키, 두 번째 인수는 데이터를 전달한다.

문자열, 숫자, 진리값, 객체, 배열 등 다양한 데이터 타입을 사용할 수 있다.

getItem()을 사용해 저장된 데이터를 불러오며, 저장시 사용한 키와 동일한 값을 인수로 전달한다.

 

HTML                                                                                                                                                              index.html

<section class="localStorage">
  <h2>localStorage</h2>
  <input type="text"/>
  <button class="btnSave">저장하기</button>
  <button class="btnRead">불러오기</button>
</section>

JavaScript                                                                                                                                                          main.js

const section = document.querySelector('.localStorage');  // 부모 요소 가져오기
const btnRead = section.querySelector('.btnRead');  // 버튼 요소 가져오기
const btnSave = section.querySelector('.btnSave');  // 버튼 요소 가져오기
const input = section.querySelector('input');  // 텍스트 입력 요소

// 저장하기 버튼 클릭 시
btnSave.addEventListener('click', () => {
  // 텍스트 입력 박스의 문자열 가져오기
  const data = input.value;
  
  // localStorage에 저장
  localStorage.setItem('myKey', data);
});

// 불러오기 버튼 클릭 시
btnRead.addEventListener('click', () => {
  // localStorage에서 불러오기
  const data = localStorage.getItem('myKey');
  
  // 텍스트 입력 박스에 문자열 대입
  input.value = data;
});

 

---

[Appendix 1]

프라이빗 브라우징, 시크릿 모드

브라우저에 이력을 남기지 않는 프라이빗 브라우징 기능이 있다.

프라이빗 브라우징 모드에서는 브라우저에 따라 localStorage의 작동 방식이 다르므로 주의하자.

창을 닫기 전까지 localStorage가 유지되는 브라우저도 있지만,

사파리처럼 localStorage에 데이터가 저장되지 않는 브라우저도 있다.

 

구글 크롬 시크릿 모드의 경우 localStorage에 데이터가 저장되지만,

브라우저를 다시 열면 데이터가 삭제되고 없다.

 

---

[Appendix 2]

sessionStorage

localStorage와 비슷한 기능으로 sessionStorage가 있으며, 사용법은 같다.

localStorage는 저장 기간의 제한이 없지만, sessionStorage는 세션이 종료(브라우저 닫기)되면 데이터도 함께 삭제된다.

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김