- local storage mdn
Window.localStorage - Web API | MDN
localStorage** **읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다. localStorage는 sessionStorage와 비슷하지만, localStorage의 데
developer.mozilla.org
📌 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
Simple to use local JSON database. Powered by plain JavaScript (supports Node, Electron and the browser) - GitHub - typicode/lowdb: Simple to use local JSON database. Powered by plain JavaScript (s...
github.com
'🍞 Front-End > JavaScript' 카테고리의 다른 글
[JavaScript] JS 클로저란? (closure) (2) | 2022.10.05 |
---|---|
[JavaScript] JavaScript 데이터 실습 - OMDb API (0) | 2022.10.03 |
[JavaScript] JavaScript 데이터 실습 - JSON (0) | 2022.10.01 |
[JavaScript] 얕은 복사와 깊은 복사 (2) | 2022.09.30 |
[JavaScript] Ajax 대해서 알아보자! (0) | 2022.09.29 |