用途
新着
履歴
分類

VueJS クッキーの操作

VueJS クッキーの操作
Vue.jsを使ったソースでクッキーの操作を実装しました。

フォームで入力した値をクッキーに書き込みます。

その後、ページロードでも読み込みますが、読み込みボタン、削除ボタンを実装しました。

保存
{{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");
		}
	}
})
公開 2019-08-08 00:08:12
このページの二次元コード
VueJS クッキーの操作

人気のサンプル

search -  category -  about
© 2024 kipure
Top