티스토리 뷰

javascript30

15 - Local Storage

fistful 2019. 3. 26. 03:23
반응형

개요

 

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

- 입력한 값을 로컬에 저장하는 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 저장소이다.


반응형

'javascript30' 카테고리의 다른 글

17 - Sort Without Articles  (0) 2019.03.27
16 - Mouse Move Shadow  (0) 2019.03.26
15 - Local Storage  (0) 2019.03.26
14 - JavaScript References VS Copying  (0) 2019.03.19
13 - Slide in on Scroll  (0) 2019.03.18
12 - Key Sequence Detection  (0) 2019.03.15
댓글
댓글쓰기 폼