팀프로젝트 시도중

localstorage 시도 중입니다. 아직 입력값을 모두 받은 상태일때 값을 넣고싶은데 현재 값이 다 들어오지 않았다고 나와서 찾아보고있습니다.

버블링은 localstorage가 되면 시도해보려고 합니다.

 

localstorage에 객체를 넣고 값을 빼오는 것을 확인했습니다.

하지만 아직 입력 후 enter을 치거나 저장하기버튼을 눌러야 하고, 현재 입력된 값들만 출력될뿐 새로고침후 그전에 저장된 값들은 아직 출력이 안됩니다.

 

모든 객체값을 내보내는 것을 찾아 내보내는데 성공했습니다. 

 

전체 삭제버튼을 누른 후 바로 새로고침이 된 후 값을 다시 넣으려는데 아래와 같은 문제가 나왔습니다.

 

알고보니 아까 수정해봤던 detail.html파일의 class를 name으로 변경했어서 나온 오류였습니다.

그래서 다시 class로 변경후 확인하니 잘 나왔습니다.

아직 입력후 바로 리뷰박스가 나오지 않아 리로드를 넣어줘야겠습니다.

enter키와 마우스키 클릭시 이벤트에 location.reload()를 넣어줬습니다.

 

리뷰를 작성할때 enter키를 누르면 저장이아닌 다음줄로 넘어가기때문에 enter키 이벤트를 없앴습니다.

그리고 확인해보니 아래 사진과 같이 띄어쓰기로 나오고 들어가는 값으로는 \n으로 들어가는것을 확인했습니다.

왜 다음줄로 안나오는지는 더 찾아봐야할꺼 같습니다.

 

 

찾아보니 \n값을 <br>로 치환해서 넣으면 된다고 해서 적용해보니 enter값이 잘 적용되는것을 볼 수 있었습니다.

 

아직 수정,삭제버튼부분은 구현하지 못했습니다. 

그리고 로컬스토리지에 있는 이름들중 입력하는 이름과 같으면 이미 있는 이름이라며 알림창을 띄우게 했습니다.

이름을 이전에 있던 값들 중 같은 값으로 사용할 수 없게끔 했습니다. 알림창을 확인하고 나면 화면이 새로고침되면서 입력하고있던 값들을 모두 없애줬습니다.

오늘은 쉬는날이라 커밋하지는 않았습니다.

 

먼저 삭제버튼 부분을 만들어보려고 addEventListener를 사용해서 구현하려 했는데 없는값이라며 이벤트를 사용할 수 없다고 오류가 났습니다. 

 

 

 

참고자료

localstorage 사용방법

localstorage에 저장된 모든 값 내보내기

이벤트 위임

버블링과 캡처링

\n값을 <br>로 변경