[Javascript] Local Storage

---

목차

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 객체를 반환한다.