TIL 10일차

KHW·2021년 8월 18일

목록 보기

9/39

innerHTML , innerText , textContent

내부구조까지 한번에 들이붓는 innerHTML과 다르게 innerText나 textContent의 경우 DOM 요소 하나의 값만 바꾸는 텍스트 형태로 넣는것이다.

innerText나 textContents 형식으로 하려면 innerHTML로 밀어넣는 HTML 형식을 document.createElement로 하나씩 만들고, 거기에 innerText 등으로 값을 넣은 뒤 appendChild를 진행한다.

script를 body태그내에 넣는 이유

script를 head에 넣으면 script를 로딩하는 동안 브라우저 렌더링이 차단된다.
따라서 body태그의 맨아래에 넣어 다른 태그들이 불러지고 무거운 script를 처리한다.

form 태그의 고유기능과 기능끊기 ( preventDefault )

기본적으로 enter를 누르면 네트워크를 통해 서버로 보내느 것이 기본동작이다. ?todo=입력값이 url에 추가되며 새로운 url로 처리한다.
이러한 고유기능을 실행시키지 않기 위해
preventDefault를 이용한다.

    $form.addEventListener('submit',e=>{
      e.preventDefault();
    })

Dom인 $form의 submit에 대해 event를 막는 e.preventDefault()를 수행한다.

쿠키

브라우저에 저장되는 작은 문자열

쿠키 추가하기

document.cookie = 'name=value' 형태로 추가할 수 있다.

쿠키 읽어오기

const cookies = document.cookie

각각이 ,를 통해 구분되므로 필요에 따라 .split(';')를 코드에 추가하여 분리 시킬 수 있다.

쿠키 유효기간 넣기

1) expires

const date = new Date()
date.setDate(date.getDate() + 1)
document.cookie = `key=name; expires=${date.toGMTString()}`

2) max-age
document.cookie = key=name; max-age=60``

쿠키의 단점

쿠기가 커지면 HTTP 요청으로 받은 header도 커져 전송이 느려진다.

보안 취약점

LocalStorage

사용법

`window.localStorage.name = 'msk'

`window.localStorage['name'] = 'msk'

`window.localStoragesetItem('name' , 'msk')

명시적으로 함수를 통해 넣는것이 안정적이라 가능한 3번을 이용한다.

특징

setItem, getItem, removeItem과 같은 다양한 메소드 존재
localStorage에는 string만 넣을 수 있어 Object와 같은 것은 JSON.stringify로 넣고 Json.parse로 꺼내야한다.

const obj = {'name' : 'msk' , 'age' : 15}
window.localStorage.setItem('noJson', obj)
window.localStorage.getItem('noJson')	//"[object Object]"

window.localStorage.setItem('Json', JSON.stringify(obj))
JSON.parse(window.localStorage.getItem('Json'));		//{name: "msk", age: 15}