[javascript] document, JSON, localstorage

document 

• 문서 전체를 나타내는 요소
• 내장 객체
• 최상위 객체

텍스트 노드 사용하는 새로운 요소 추가하기

1. 노드 요소 추가

document.createElement()

const button = document.createElement("button");

2. 텍스트 노드 생성

document.createTextNode()

const buttonText = document.createTextNode("버튼입니다.");

3. 연결

부모노드.appendChild(자식노드)

button.appendChild(buttonText);

4. 삭제

부모노드.removeChild(자식노드)

button.removeChild(buttonText);

---

JSON

• Javascript Object Notation의 약자
• 텍스트 기반 데이터 전송 표준 객체

객체 ➡ JSON

객체를 문자열로 변환한다.

JSON.stringify(객체명);

 

JSON ➡ 객체

JSON은 문자열이기 때문에 가져와서 사용하려면 객체로 변환해야한다.

JSON.parse(json)

---

localstorage

브라우저 저장소

• 브라우저에 데이터를 저장할 수 있다.
• 새로고침해도 데이터가 유지된다.
• key - value 형태의 문자열로 저장한다.
• 로컬 저장소에는 문자열만 저장할 수 있기 때문에 JSON 객체로 변환시켜 저장한다.

데이터 저장하기

 setItem() 

 

key - value 형태로 저장한다.

 

value에는 JSON 객체로 변환해서 넣는다.

localStorage.setItem("key", value)

저장한 데이터 가져오기

 getItem() 

 

저장할 때 사용한 key값을 이용해 가져온다.

localStorage.getItem(key)