フォームで入力した値をクッキーに書き込みます。
その後、ページロードでも読み込みますが、読み込みボタン、削除ボタンを実装しました。
{{myStatus}}
入力した値:「{{myInputData}}」
保存されている値:「{{mySavedData}}」
読込
削除
cookieの「v_mydata」という名前の値にセットされます。
実装のHTML
<div id="demo_app">
<div class="demo_flex">
<input type="text" v-model="myData" placeholder="入力欄">
<div v-on:click="save" class="demo_btn">保存</div>
</div>
<div class="demo_info">{{myStatus}}</div>
<div class="demo_info">入力した値:「{{myInputData}}」</div>
<div class="demo_info">保存されている値:「{{mySavedData}}」</div>
<div v-on:click="load" class="demo_btn">読込</div>
<div v-on:click="remove" class="demo_btn">削除</div>
</div>
JSはこちら
var demo_app = new Vue({
el: '#demo_app',
data: {
myData: '',
myStatus: '文字を入力して保存してください',
myInputData: '',
mySavedData: '保存されてません',
},
watch: {
myData: function(newVal, oldVal) {
this.myInputData = newVal;
}
},
mounted: function () {
this.mySavedData = this.$cookies.get("v_mydata") || '';
},
methods: {
save: function(e) {
if(this.myInputData.length < 1){
this.myStatus = '入力が空です';
}else{
this.$cookies.set("v_mydata",this.myInputData,60 * 60 * 24);
this.myStatus = '保存完了。更新するか、読込をクリック';
this.mySavedData = '';
}
},
load: function(e) {
this.mySavedData = this.$cookies.get("v_mydata") || '';
},
remove: function(e) {
this.$cookies.remove("v_mydata");
}
}
})