๊ฒ์ํ์ ์์์ ์ฅ ๊ธฐ๋ฅ์ ๋ง๋ค์ด๋ณด์. (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>
localStorage.setItem("tempPost", JSON.stringify(tempPost))
JSON.parse(localStorage.getItem("tempPost"))