🔒 문제 상황

게시판의 임시저장 기능을 만들어보자. (style 은 다 제외했다.)

1. Board.vue 에서 [글쓰기] 버튼을 누르면 글을 쓸 수 있는 모달창이 보여진다.
2. 모달 input에 어떠한 값을 입력한다.
3-1. [임시저장] 버튼을 누르면 localStorage에 해당 내용이 저장된다.
3-2. [저장] 버튼을 누르면 DB에 저장이 된다. (해당 내용 생략)
4. 임시 저장된 상태에서 Board.vue 에서 다시 글을 쓸 수 있는 모달창으로 진입할 때 임시저장된 값을 가져올지 여부를 묻는다. TRUE 이면 localStorage의 값을 가져와 화면에 뿌려준다. FALSE 이면 localStorage의 값을 삭제하고 새로고침을 한다.

🔑 문제 해결

[Board.vue]

<template>  
  <div>
  	<div @click="showWrite()"><span>새 글쓰기</span></div>
  </div>
  
  <div v-if="isShowWrite == true">
    <!-- 글을 쓸 수 있는 모달창 -->
    <div><span>제목</span></div>  
	<div><input type="text" id="editTitle" placeholder="입력하세요" v-model="postTitle"/></div>  

	<div @click="setTempStore"><span>임시 저장</span></div>
	<div @click="savePost"><span>저장</span></div>
	<div @click="goBoard"><span>나가기</span></div>
  </div>
  
  <div v-if="isExistsTempModal == true">
    <!-- localStorage에 임시 저장된 값이 있을 때 임시 저장된 값을 가져올 지 여부를 묻는 모달창 -->
    <div><span>최근에 작성중인 게시글이 있습니다. 불러올까요?</span></div>  
	<div @click="getTempStore(false)"><span>취소</span></div>
	<div @click="getTempStore(true)"><span>확인</span></div>
  </div>
</template>

<script>    
import Write from "/경로/Write"  
export default {
  data: {
  	postTitle: "",
  	isShowWrite: false,
  	isExistsTempModal: false,
  },
  method: {
  	showWrite(){
  		// 글을 쓸 수 있는 모달창이 뜬다.
  		isShowWrite = true 
  		// 모달창이 뜰 때 로컬스토리지에 저장된 값이 있는지 확인한다.
  		this.checkTempStore() 
  	},
  	checkTempStore(){      
      if(localStorage.getItem("tempPost")){
  		// 임시저장된 값이 있을 때 임시 저장된 값을 불러올지 여부를 묻는 모달창을 띄운다.
        this.isExistsTempModal = true
      }
    },
  	getTempStore(){
  		if(flag === true){ // 모달창의 확인 버튼        
          // String 으로 저장된 값 Object로 변환
          let tempPost = JSON.parse(localStorage.getItem("tempPost")) 
          // 저장된 값을 사용하여 데이터 넣기
          this.postTitle = tempPost[0].title
        }else if(flag === false){ // 모달창의 취소 버튼
          // 저장된 값을 사용하지 않으면 localStorage 삭제
          localStorage.removeItem("tempPost")
  		  this.$router.go()
        }
  	},
  	setTempStore(){
        let tempPost = [{title: this.postTitle}]
  		// 게시판의 경우 제목, 내용, 작성자 등 넘겨야 할 데이터를 객체화해서 보내는 것이 좋다. object 형태로 바로 저장하게 되면 [object, Object] 형태로 저장되기 때문에 해당 사항을 방지하기 위해 JSON.stringify() 메소드를 사용했다.
        localStorage.setItem("tempPost", JSON.stringify(tempPost))
		alert("임시 저장 되었습니다.")
  	},
  	savePost(){
  		// DB 인서트
  	},
  	goBoard(){
  		isShowWrite = false // Write 모달창 꺼짐
  	},
  },
}
</script>

<style></style>

📌 TIP

• localStorage에 객체를 저장할 때는 JSON.stringify() 메소드를 사용하여 String 형태로 저장한다.

	localStorage.setItem("tempPost", JSON.stringify(tempPost))

• localStorage에 저장된 객체를 사용할 때는 JSON.parse() 메소드를 사용하여 String 형태를 Object로 변환한다.

	JSON.parse(localStorage.getItem("tempPost")) 

• localStorage에 값이 저장되었는지를 볼 수 있는 방법은 크롬기준, [F12 관리자툴] - [Application] - [Storage] - [Local Storage] 에서 확인 할 수 있다.