[JavaScript] JavaScript 데이터 실습 - Storage

- local storage mdn

Window.localStorage - Web API | MDN

 

📌 localStorage vs sessionStorage

localStorage 데이터는 만료되지 않는다.

sessionStorage 데이터는 페이지 세션이 끝날 때, 즉 페이지를 닫을 때 사라진다.

 

각각의 장단점이 있지만, 일반적으로 localStorage를 사용한다!

 

Application의 Local Storage를 확인해보면 Key Value 형태로 보인다.

 

📌 setItem 삽입

객체 데이터를 넣으려고 했으나 obejct Object 형태로만 나온다.

일반적인 객체나 배열 형태로 넣으면 안 되고 문자 데이터화 시켜서 넣어야 한다.

 

JSON 객체의 stringify 메서드를 사용하면 localStorage에서 보기 좋은 형태의 데이터로 넣을 수 있다.

새로고침해도 데이터가 사라지지 않는다.

 

 

📌 getItem 확인

localStorage에 삽입한 것을 가져와 콘솔에 출력하고자 한다.

하지만 바로 가져왔을 경우엔 문자 데이터로 출력되는 것을 볼 수 있다.

 

JSON 객체의 parse 메서드를 사용해야만 실제 JavaScript의 데이터로 콘솔에 출력된다.

 

📌 removeItem 제거

user라는 객체를 삽입했지만 removeItem으로 localStorage에선 삭제된 것을 볼 수 있다.

 

📌 localStorage 수정

1. 간단한 방법

객체의 속성을 바꾸고 싶다면 getItem으로 localStorage에 있는 객체를 가져온다.

가져온 객체를 parse 메서드를 통해 변수에 담아주고, 속성을 변경해준다.

콘솔에선 객체를 출력해보면 age가 22로 바뀐 것을 볼 수 있으며

다시 stringify 메서드를 사용해 문자 데이터화 시켜 setItem 삽입을 해준다.

 

2. lodash 패키지 기반

GitHub - typicode/lowdb: Simple to use local JSON database. Powered by plain JavaScript (supports Node, Electron and the browser