vue-cookies
Version:
A simple Vue.js plugin for handling browser cookies
49 lines (46 loc) • 1.3 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="https://unpkg.com/vue"></script>
<script src="../vue-cookies.js"></script>
<title>Welcome Username</title>
</head>
<body>
<div id="app">
<p v-if="!welcomeValue">
Please enter your name : <input type="text" @keyup.enter="username" />
</p>
<p v-else>
Welcome again : {{ welcomeValue }}
<button @click="deleteUser">{{deleteUserText}}</button>
{{deleteUserState}}
</p>
</div>
</body>
<script>
const app = Vue.createApp({
data: function () {
return {
welcomeValue: this.$cookies.get('username'),
deleteUserText: 'Delete Cookie',
deleteUserState: '',
};
},
methods: {
username: function (event) {
this.welcomeValue = event.target.value;
this.$cookies.set('username', this.welcomeValue);
},
deleteUser: function () {
this.$cookies.remove('username');
this.deleteUserState = "√";
setTimeout(function () {
location.reload();
}, 0.5 * 1000);
},
},
});
app.use($cookies).mount('#app');
</script>
</html>