vue 3, vue-cli 4.5.x 의 환경을 사용하고 있습니다.
■ LocalStorage
- 로컬 스토리지에 관하여 자세한 내용은 MDN의 링크를 확인해주시기 바랍니다.
Window.localStorage - Web API | MDN
localStorage 읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다.
developer.mozilla.org
사용 방법은 아주 간단합니다.
localStorage.setItem() 으로 저장, localStorage.getItem() 으로 호출 입니다.
번외로 localStorage.removeItem() 로 지정하여 삭제가 가능하고, localStorage.clear()로 모두 삭제가 가능합니다.
■ 예제
//add.vue
<template>
<div class="add">
<input
type="text"
class="add__input"
placeholder="Enter your task"
v-model="newTodoItem"
@keyup.enter="addTodoItem"
/>
<button
class="add__button"
@click="addTodoItem"
>Add</button>
</div>
</template>Input:text 창에서 enter를 누르거나, button을 클릭하면 addTodoItem이라는 함수가 호출되게 하였습니다.
v-model을 통하여 input에 작성되어져 있는 value와 연동하였습니다.
export default {
data () {
return {
newTodoItem: ''
}
},
methods: {
addTodoItem () {
if(this.newTodoItem !== '') {
const value = {
item: this.newtodoItem,
date: `${new Date().getMonth() + 1}/${new Date().getDate()}`,
compeleted: false
}
// setItem 이라는 method 속에 key, value를 전달
localStorage.setItem(this.newTodoItem, JSON.stringify(value))
this.clearInput()
}
},
clearInput () {
this.newTodoItem = ''
}
}
}localStorage.setItem( )은 key와 value를 전달 수가 있는데, 이를 응용하여 value에 JSON 객체를 전달하도록 하였습니다.
value라는 객체에 위에서 작성한 input의 값을 저장하고, localStorage에 데이터를 저장하였습니다.
로컬 스토리지에 저장된 것을 확인하고 싶다면, 개발자도구 -> Application -> 저장용량 -> 로컬 스토리지 에서 확인하실 수 있습니다.
'FrontEnd > Vue.js' 카테고리의 다른 글
| [ Vue.js ] Vue-router 사용하기 + 데이터 전달하기 (바인딩) , $route, router, how to use, useRoute (0) | 2022.02.08 |
|---|---|
| [ Vue.js ] Computed 속성 다루기 (0) | 2022.02.05 |
| [ vue.config.js ] config Error - appendData 에러 해결 (0) | 2022.02.02 |
| [ Vue.js ] Arrow funciton ()=> ? why?? (0) | 2022.02.02 |
| [ Vuetify ] Vuetify 뷰티파이 이용해서 Login 창 구현 (0) | 2022.02.01 |
