티스토리 뷰

Language/JavaScript

[Javascript] Local Storage

무화과(Fig) 2023. 7. 4. 21:30

목차

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
링크
«   2025/02   »
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
글 보관함