/ JAVASCRIPT

JavaScript(13) - localStorage

JavaScript 관련 포스팅

localStorage란?

  • 현재 기기의 브라우저에 내에 key-value쌍을 저장할 수 있게 함
  • 도메인별로 따로 저장(최대 5Mb까지 저장가능)되며, 삭제하기 전에는 없어지지 않음
  • 이전 페이지에서 사용자가 검색했던 내용을 계속 parameter에 넣어서 들고 다니지 않을 수 있음
  • 문자열만 저장할 수 있기 때문에 object나 array는 JSON.stringify()를 사용해 문자열로 변환한 뒤 저장하고, 가지고 올 때는 JSON.parse()를 사용해 JSON형태로 변환해서 사용
  • 서버가 HTTP 헤더를 통해 storage 객체를 조작할 수 없으며, 웹 스토리지 객체 조작은 모두 javascript 내에서 수행됨

cf.) sessionStorage

  • 브라우저 창을 닫는 순간 사라짐
  • 같은 브라우저 탭 안에서만 유지됨

localStorage 사용

1. localStorage 객체에 접근해 key, value 쌍을 추가함

  • localStorage.setItem('key', 'value'); 
    localStorage.setItem('supermarket', 'carrot, 1000원');
localStorage.setItem('drugstore', 'aspirin, 3000원');
  • 개발자 도구(F12) application 탭의 Local Storage 항목에서 data를 확인할 수 있음 image

2. localStorage에 저장된 value를 key값을 이용해 불러옴

  • localStorage.getItem('key'); 
    localStorage.getItem('supermarket');
localStorage.getItem('drugstore');

    image

3. localStorage에 저장된 data를 key값을 이용해 개별 삭제함

  • localStorage.removeItem('key'); 
    localStorage.removeItem('supermarket');

    image

4. localStorage에 저장된 모든 data를 전체 삭제함

  • localStorage.clear(); 
    localStorage.clear();

    image

5. JSON 이용하기

  • localStorage의 key가 늘어나면 관리가 어렵기 때문에 일반적으로 하나의 key에 여러 data를 넣음
  • JSON을 이용하면 간편하게 data를 관리할 수 있음
  • JSON(JavaScript Object Notation)
    → JavaScript에서 객체를 표현하는 형식으로 데이터를 저장
    → 문자열을 사용해 다른 프로그램들과 통신을 하는 상황에서 사용
  • JSON 객체
    • JSON.stringify(): javascript객체를 JSON문자열로 변환
    • JSON.parse(): JSON문자열을 javascript객체로 변환
  • JSON 규정
    1. key는 문자열만 가능
    2. 문자열은 반드시 큰따옴표로 감싸야 함
    3. 데이터는 숫자, 문자열, boolean 만 저장가능
    4. 컨테이너 데이터는 object, array만 사용 가능( function은 불가)

6. JSON data를 localStorage에 저장하기

  • JSON.stringify()로 javascript객체를 JSON으로 변환 
    const data = {
  carrot: "1000원",
  aspirin: "3000원"
}
localStorage.setItem('item', JSON.stringify(data));

    image → 모든 항목이 큰 따옴표로 감싸져 있음(JSON 문자열로 변환됨) image

7. localStorage에 저장된 JSON data를 javascript 객체로 변환하기

  • JSON.parse()로 JSON 문자열을 JavaScript객체로 변환

  • JavaScript에서 사용가능한 객체로 변환됨

      const item = {
      carrot: "1000원",
      aspirin: "3000원"
  }

  const stringifiedItem = JSON.stringify(item); // stringify()
  localStorage.setItem('item', stringifiedItem); // localStorage에 저장
  const parsedItem = JSON.parse(stringifiedItem); // parse()

  console.log(stringifiedItem); // JSON 문자열
  console.log(parsedItem); // JavaScript 객체

  console.log(parsedItem.carrot); // 1000원
  console.log(parsedItem.aspirin); // 3000원

    image

< 출처 >

“입문자를 위한 자바스크립트 기초 #26 로컬스토리지 (localStorage),” 유튜브 비디오, 10:00, 게시자 “유노코딩,” 2021년 10월 08일, https://youtu.be/N7oln9Z3WYg

“혼공 자바스크립트 52강 - localStorage 객체(3) : JSON 객체와 결합해서 사용하기,” 유튜브 비디오, 8:02, 게시자 “윤인성,” 2021년 07월 25일, https://youtu.be/Id7o7DwhiFY