cookie, LocalStorage

• Cookie
• 브라우저에 저장되는 작은 문자열
• HTTP 프로토콜의 일부
• 가장 오래된 저장 방법

• 쿠키 추가하기
• document.cookie = `key = value`
• 이전 쿠키를 덮어쓰는게 아니라 새로 추가 됨

• 읽어오기
• document.cookie 로 접근
• ;로 구분된 문자열이 넘어옴

• 쿠키 유효기간 넣기
1. `document.cookie = ~; expires=GMT 시간;
2. expires 말고 max-age
• 유효기간이 없으면 브라우저를 닫을 때 쿠키가 삭제 됨

• 주의사항
• HTTP 요청시 헤더에 쿠키가 같이 나가기 때문에, 쿠키 사이즈가 커지면 HTTP 요청 크기가 커지는 것 ⇒ 사이즈에 제한
• 여러 보안 취약점이 있음

• key, value 기반으로 로컬에 데이터 저장

• 도메인 기반으로 storage가 생성
• 같은 도메인이면, 같은 탭일 때 storage가 공유

• 명시적으로 삭제하지 않는다면, 삭제되지 않음

• 값을 넣는 법
1. localstorage.key =
2. localstorage[key] =
3. localstorage.setItem(key, value)
• 제일 권장하는 방법!
• 위에 1,2 방법은 사용자가 localStorage의 내장 함수들나 length, toString 등과 동일한 이름으로 key를 설정해서 덮어 씌우는 실수를 범할 수 있음
• key, value 모두 문자열로 취급
• 위의 이유로, 객체를 값으로 넣고 싶다면 JSON.stringify(str)로 넣고, 꺼내서 쓸 땐 JSON.parse로 파싱해서 가져옴
• 만약 객체를 그냥 setItem 했다면, 객체를 toString한 값이 저장됨

• 불러오기 : ~.getItem(key)

• 삭제 : removeItem(key)

• 전체 삭제 : clear()

• 전체적으로 로컬 스토리지와 같음

• 차이점 하나 ⇒ 브라우저를 닫으면 저장된 내용 초기화

new TodoForm({
        $target,
        onSubmit : (text) => {
            list.setState(
               [
                ...list.state,
                {
                    text
                }
               ]
            )

            localStorage.setItem('todos', JSON.stringify(list.state));  //로컬 스토리지에도 추가!
        }
    });

const list = new TodoList({
...

const initialState = JSON.parse(localStorage.getItem('todos')) || [] //코드 추가

const $app = document.querySelector('.app');

new App({$target : $app}, initialState);

• 외부 툴(ex. 크롬 개발자도구)을 이용해 json을 임의로 조작해서 에러가 난다면?
⇒ 이를 대비하기 위해 로컬 스토리지의 getItem 함수를 커스텀한다.
⇒ 에러가 발생하면 기본 값을 주도록!

• 또한 localStorage는 메모리 제한이 있는데, 캐싱을 잘못 설계하면 용량이 제한을 벗어나서 에러 발생
⇒ setItem을 에러 처리하도록 커스텀 한다.

const storage = (function(storage) {
	const setItem = (key,value) => {
		try {
			storage.setItem(key, value)
		} catch(e) {
			console.log(e.message)
		}
	}

	const getItem = (key,defaultValue) => {
		try {
			const storedValue = storage.getItem(key)
			
			if (storedValue) {
				return JSON.parse(storedValue)
				// 여기서 value가 따옴표 안붙인 string이 오면 오류, 숫자는 통과
				// JSON의 값으로 올 수 있는 type은 객체, 배열, 숫자, 문자열, boolean, null이기 때문
			}
		} catch(e) {
			console.log(e.message)
			return defaultValue
		}
	}
}
)(window.localStorage)

 

• LocalStorage에 stringify 하지 않고 배열을 저장하면 []없이 문자열 형태로 저장된다.
• ex) setItem([a,b,c]) ⇒ getItem 하면 : ‘a,b,c’ (이중 배열 모두)

• 돔객체는 JSON.parse 가 아닌 DOM Parser 이용 ⇒ 참고

• chrome 개발자 도구 > application 에서 localStorage 값을 확인할 수 있다.