크롬 개발자도구에서 Application탭을 들어가보면 좌측에 여러종류의 브라우저내에서 지원하는 저장공간이 있습니다.

• Local/Session Storage : key, value형태로 저장, 숫자 데이터 저장 가능
  • Local : 비휘발성
  • Session : 휘발성(영구저장이 어려움)
• IndexedDB : 크고 많은 구조화된 데이터를 DB처럼 저장 가능, 문법 더러움
• Cookies : 유저 로그인정보 저장공간
• Cache Storage : html, css, js, img파일 등을 저장해두는 공간

여기서 필요에 따라 골라쓰면 되는데
이번 글에서는 범용적으로 쓸 수 있는 Local Storage를 써보겠습니다.

Local Storage / Session Storage

Local Storage/Session Storage는 문자, 숫자만 key:value형태로 저장가능하고 5MB까지만 저장이 가능합니다.

Local Storage는 브라우저를 재접속해도 영구적으로 남아있는 반면,
Session Storage는 브라우저를 재접속하면 데이터가 날라가게됩니다.

로컬스토리지/세션스토리지 사용법

LocalStorage

// localStorage에 데이터 삽입
localStorage.setItem('이름', 'kim');

// localStorage에 있는 '이름'이라는 변수에 value값 가져오기
localStorage.getItem('이름');

// localStorage에 데이터 삭제
localStorage.removeItem('이름');

// 편법 arr/obj → JSON
let arr = [1, 2, 3];
let newArr = JSON.stringify(arr);
localStorage.setItem('num', newArr);

// JSON → arr/obj
newArr = JSON.parse(newArr);
localStorage.setItem('num', newArr);

SessionStorage

// sessionStorage에 데이터 넣기
sessionStorage.setItem('이름', 'kim');

// sessionStorage에 있는 '이름'이라는 변수에 value값 가져오기
sessionStorage.getItem('이름');

// sessionStorage에 데이터 삭제
sessionStorage.removeItem('이름');

// 편법 arr/obj → JSON
let arar = [1, 2, 3];
let newArr = JSON.stringify(arr);
sessionStorage.setItem('num', newArr);

// JSON → arr/obj
newArr = JSON.parse(newArar);
sessionStorage.setItem('num', newArr);

• 수정하는 법은 없어서 꺼내서 수정하고 다시 저장하면 됩니다.

로컬스토리지에 array/object로 저장하려면

array, object를 로컬스토리지에 저장하면 강제로 문자를 바꿔서 저장됩니다.

강제로 문자로 바꿔서 저장하기 때문에 깨져서 저장이 됩니다.

[1, 2, 3] → 1,2,3
array나 object를 로컬스토라에 저장하면 JSON으로 바꿔주면 문자취급을 받아 저장할 수 있습다

let arr = [1, 2, 3];
let newArr = JSON.stringify(arr);

localStorage.setItem('num', newArr)

1. JSON.stringify()안에 array/object를 집어넣으면 JSON으로 바꿔줍니다.
   그걸 localStorage에 저장하라고 코드를 짜줍니다.
   그럼 깨지지 않고 저장이 가능합니다.

#Summary

[localStorage]

• 비휘발성
  Array/Object → JSON 변환하고 싶으면 JSON.stringify()
  JSON → Array/Object 변환하고 싶으면 JSON.parse()

[localStorage]

• 휘발성