티스토리 뷰
목차
1. Local Storage
2. localStorage 사용 방법
3. setItem(), getItem()
4. JSON.stringify()
5. JSON.parse()
1. Local Storage
한마디로 브라우저에서 작은 정보를 기억해 줄 수 있는 공간이다.
이 공간에 저장한 데이터는 브라우저 기능을 이용하거나 데이터를 직접 삭제하지 않는 이상, 새로고침을 하거나 창을 껐다가 키는 것으로는 삭제되지 않는다.
따라서 이 공간에 todo를 저장해서 활용할 수 있다.
2. localStorage 사용 방법
- setItem() - key, value 추가
- getItem() - value 읽어 오기
- removeItem() - item 삭제
- clear() - 도메인 내의 localStorage 값 삭제
- length - 전체 item 갯수
- key() - index로 key값 찾기
3. setItem(), getItem()
localStorage에 데이터를 저장하거나 가져오는 방법으로 setItem, getItem이 있다.
setItem()
localStorage에 아이템을 추가하기 위해서는 setItem() 함수를 사용한다.
window.localStorage.setItem(key, value)
getItem()
localStorage의 아이템을 읽기 위해서는 getItem() 함수를 사용한다.
window.localStorage.getItem(key)
4. JSON.stringify()
JavaScript 객체를 JSON 문자열로 변환할 때는 JSON 객체의 stringify() 메서드를 사용한다. stringify() 메서드는 JavaScript 객체를 인자로 받고 JSON 문자열을 반환한다.
타입을 변환시켜주지 않으면 value값이 [object Object]로 뜬다.
5. JSON.parse()
역으로 JSON 문자열을 JavaScript 객체로 변환할 때는 JSON 객체의 parse() 메서드를 사용한다. parse() 메서드는 JSON 문자열을 인자로 받고 결과값으로 JavaScript 객체를 반환한다.
'Language > JavaScript' 카테고리의 다른 글
[Javascript] .indexOf() .findIndex() (0) | 2023.07.12 |
---|---|
[Javascript] .find() (0) | 2023.07.11 |
[Javascript] .flat() .flatMap() 알아보기 (0) | 2022.09.08 |
[JavaScript] Optional chaining (0) | 2022.08.22 |
[JavaScript] .reduce() 활용하기 (0) | 2022.08.10 |
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- html
- 제어 컴포넌트
- javascript
- innerhtml
- 취업까지달린다
- js
- 코드잇 스프린트
- 유사배열객체
- 비제어 컴포넌트
- 배열
- 비동기
- 중급 프로젝트
- 객체
- Git
- hydrationboundary
- react
- CSS
- tanstackquery
- 프론트엔드
- arguments
- currentTarget
- 리액트
- 스프린트프론트엔드6기
- 동기
- 코드잇스프린트
- map
- rest parameter
- GitHub
- Target
- Next.js
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
글 보관함