15 - Local Storage

개요

 

- 입력한 값을 목록에 추가한다.

- 입력한 값을 로컬에 저장하는 Local Storage 개념을 이해해본다.

 

 

index-START.html

 

	- 참고 링크: https://css-tricks.com/using-svg/ - svg 얻을 수 있는 사이트: https://thenounproject.com/ - 이미지를 다운로드 한 다음 소스를 보면 svg 태그가 보인다 - svg 라는 태그를 통해 이쁜 이미지를 가져다 붙일 수 있다
	1) 위와 같은 svg 이미지가 있고 2) h2, ul, li 태그들로  글자들이 위치해 있다.   3) 그리고 가장 중요한 입력창 form   -- script 는 1) .add-items 를 가져온 addItems 2) .plates 를 가져온 itemsList 3) 그리고 입력된 값들을 넣어둘 items 가 있다.   -- 동작은 1) 입력창에 값이 입력되면 2) items 에 저장되고 3) 그것을 plates 에  넣어서 보여주는 것으로 보인다.

 

style.css

 

	svg 이미지에 대해 배경이나 둘레 등을 지정해주었다.
	.plates 가 css 에선 가장 중요한 부분이겠다.   - list-style 은 목록의 앞부분에 숫자, 점 등등을 말하는데 여기선 아무것도  하지 않겠다는 것 - cursor 가 pointer 인건 마우스 커서를 디폴트 (화살표)에서 손가락 모양으로 바꾸겠다는 것   - 나머지는 실제 적용되는 최종 코드에서 보면 되겠다.

 

index-FINISHED.html

 

너무 상세히 들여다 보려니 오히려 지치게 되는듯 하다.

진도를 나가는 것도 중요하니 조절을 하도록 하자

 

 

	localStorage 는 문자열로만 저장이 가능하다. 따라서 1) 저장할때는 JSON.stringify() 로 문자열로 만들고 2) 다시 값들로 만들때는 JSON.parse() 를 해준다.
	e.preventDefault() - 이벤트 발생시 디폴트 동작을 다 막아버린다. - 여기서는 input submit 시에 디폴트로 일어나는 refresh 를 막아준다.   '[name=item]' - 말 그대로 이름이 item 인 element 만 골라낸다.   text: text 는 text 하나만 써줘도 된다.   1) items 에 item 을 추가해주고 2) itemsList (=.plates) 에 다가 전체 items 를 html 로 뿌려준 다음 3) items 를 문자열로 변환하여 저장한다.   this.reset() - input 에 입력한 값을 (처리 완료 했으니) 지워준다.
	1) items 를 입력으로 받아서 2) 이걸 인덱스 값을 가진 map(plate, i) 로 바꿔 파라미터로 넣은 후 3) html list 로 populate 해준다. - data-index=${i} 와 - id="item$[i}" 로 해두어 나중에 요긴하게 쓴다.
	e.target.matches(): 'input' 을 클릭한 게 아니면 바로 리턴   1) e.target.dataset.index 값은 목록의 인덱스 값이 된다. 2) 이걸로 items[index] 의 done 값을 바꿔준다. - 바뀐 값은 아래의 populateList() 시에 적용되겠지? 3) 바뀐 값을 local storage 에 저장해주고 4) html 로 바꿔서 뿌려준다.
	1) input 에서 submit 이 일어나면 addItem 을 실행하고 2) itemsList 에서 click 이 일어나면 toggleDone 이 일어난다.   최초 실행시에 loal storage 에 있을 수 있는 값을 한 번 populate 해준다.

 

참고. local Storage

 

https://www.zerocho.com/category/HTML&DOM/post/5918515b1ed39f00182d3048

 

- HTML5 에 추가된 저장소

- 간단하게 key-value 를 저장할 수 있다.

- 문자열로만 저장한다.

 

1) Local Storage 는 사용자가 지우지 않으면 계속 브라우저에 남아있다. (크기 제한은 있다.)

2) Session Storage 는 윈도우나 브라우저 탭을 닫으면 제거된다.

3) Cookie 는 만료기한이 있는 key-value 저장소이다.