브라우저에 데이터를 저장하는 방법으로 localStorage와 sessionStorage가 있다.
문자 숫자를 저장할 수 있으며 최대 5MB 까지 저장 가능

localStorage와 sessionStorage 차이점 정리
참고: https://dev-syhy.tistory.com/39

localStorage와 sessionStorage의 차이점

• localStorage는 브라우저나 탭을 닫아도 계속 유지되고
• sessionStorage는 브라우저나 탭을 닫으면 사라짐

localStorage 데이터 저장(feat.배열 데이터 저장)

데이터 저장은 key: value 형태로 숫자, 문자 데이터 저장 가능

localStorage.setItem("key이름", 넣을 데이터)

배열을 localStorage에 저장하려면 JSON 함수를 활용해 문자로 취급되게 하고 저장

마우스 오른쪽 > 검사 > Application > localStorage에서 확인 가능

데이터 여러개를 저장하려면 배열 형태로 데이터를 저장하는 것이 좋다.

<script>
var lang = ['Korean', 'English', 'Japanese'];
var lang2 = JSON.stringify(lang);
//lang 배열을 문자형태로 변경, lang2 = ['Korean', 'English', 'Japanese']'
localStorage.setItem('language', lang2);//localStorage에 key:'language'로 저장
</script>

localStorage 배열 데이터 수정 추가

• localStorage.getItem('key이름')으로 저장한 데이터를 불러온다.
• 이때 불러온 데이터는 문자 형태로 되어있어서 JSON.parse(localStorage.getItem('key이름'))를 통해 array/object 형태로 바꿔준다.
• JSON.parse(localStorage.getItem('key이름')).push(넣을 데이터);로 데이터를 추가한다.
• JSON.stringify(JSON.parse(localStorage.getItem('key이름')))다시 배열 -> 문자로 변경한다.
• localStorage.setItem('key이름',JSON.stringify(JSON.parse(localStorage.getItem('key이름'))))
  내가 적었지만 변수를 사용하지 않고 하려니 매우 복잡해보인다...😵

위의 lang 예시로 다시 보기

<script>
localStorage.getItem('language');
//'["Korean", "English", "Japanese"]'
JSON.parse(localStorage.getItem('language'));//문자형으로 된 자료를 다시 배열로 바꾸기
//["Korean", "English", "Japanese"]
var newlang = JSON.parse(localStorage.getItem('language'));
//배열로 바시 바꾼 데이터를 변수로 선언하기
newlang.push('Spanish');
//4
//push()함수는 괄호 안의 데이터를 추가하고 추가한 데이터까지 포함한 데이터 갯수를 반환값으로 출력함

console.log(newlang);
//['Korean', 'English', 'Japanese', 'Spanish']

JSON.Stringify(newlang);
//'Spanish'데이터를 추가한 배열을 다시 문자로 바꿈
//'['Korean', 'English', 'Japanese', 'Spanish']'

localStorage.setItem('language', JSON.Stringify(newlang));
//localStorage로 'language'라는 key로 '['Korean', 'English', 'Japanese', 'Spanish']'데이터를 저장

localStorage.getItem('language');
//'['Korean', 'English', 'Japanese', 'Spanish']'
</script>

localStorage 데이터 삭제

마우스 오른쪽 클릭 - 검사(DevTools)켜기 - Application - 지우려는 key 또는 value클릭 - 마우스 오른쪽 클릭 - delete