Vue3.js - 로컬스토리지 사용(localStorage)

개요

 

Stringboot Vue3.js 로 문자발송프로젝트 진행 중  백엔드 회원가입 dto 에 유저아이디(memId) 가 있다. 이거 유저아이디를 foreign 키로 참조 하고 있는 아이가 발송테이블에 memId 가 있다. 문제는 발송 등록 할 때 로그인한 회원 아이디로 문자내용 시간 등 DB에 insert 하는건데 memid 를 어떻게 가져올까 하다가 Vue3.js 에 로컬스토리지를 사용해 보기로 했다.

 

localStorage란?

localStorage를 사용하면, 브라우저에 key-value 값을 Storage에 저장할 수 있습니다.

저장한 데이터는 세션간에 공유됩니다.

즉, 세션이 바뀌어도 저장한 데이터가 유지됩니다.

 

localStorage 메서드 

• setItem() - key, value 추가하기
• getItem() - value 읽어오기
• removeItem() - item 삭제하기
• clear() - 도메인 내의 localStorage 값 삭제하기
• length - 전체 item 갯수
• key() - index로 key값 찾기

 

1. 로그인 시점에 local.storage.setItem() 을 이용해서 로그인 아이디를 저장해준다.

 

 

2. 발송페이지에 저장한 localStorage 를 getItem 으로 가져온다.

 

 

 

3. 넘겨준 데이터를 axios 이용하여 백엔드와 통신해서 넘겨준다.

 

 

 

4. 백엔드에 잘 넘어갔는지 확인

 

 

잘 넘어간거를 확인 할 수 있다.

 

DB 에도 잘 저장되었다.