Home >Web Front-end >JS Tutorial >VUE front-end cookie simple operation example sharing

VUE front-end cookie simple operation example sharing

小云云Original: 2018-01-15 11:17:582535browse

This article mainly introduces the VUE front-end cookie simple operation code in detail, which has certain reference value. Interested friends can refer to it. I hope it can help everyone.

The following is a simple cookie operation, which is currently limited to front-end instances. The specific content is as follows

There are two points to note:

1. Cookie content Stored name
2. Deleting cookies is achieved by setting the expiration to the past time

<body>
<p id="app">
 <button @click="clearCookie()">
 清除cookie
 </button>
</p>
</body>
<script>
 let app = new Vue({
 el: "#app",
 data: {
 },
 created: function () {
  this.checkCookie();
 },
 methods: {
  //设置cookie
  setCookie: function (cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  var expires = "expires=" + d.toUTCString();
  console.info(cname + "=" + cvalue + "; " + expires);
  document.cookie = cname + "=" + cvalue + "; " + expires;
  console.info(document.cookie);
  },
  //获取cookie
  getCookie: function (cname) {
  var name = cname + "=";
  var ca = document.cookie.split(&#39;;&#39;);
  for (var i = 0; i < ca.length; i++) {
   var c = ca[i];
   while (c.charAt(0) == &#39; &#39;) c = c.substring(1);
   if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
  }
  return "";
  },
  //清除cookie
  clearCookie: function () {
  this.setCookie("username", "", -1);

  },
  checkCookie: function () {
  var user = this.getCookie("username");
  if (user != "") {
   alert("Welcome again " + user);
  } else {
   user = prompt("Please enter your name:", "");
   if (user != "" && user != null) {
   this.setCookie("username", user, 365);
   }
  }
  }
 }
 })
</script>

Related recommendations:

HTML5 Web cache and application cache (cookie, session)

jQuery combined with jQuery.cookie.js plug-in to implement skinning function example

jQuery implementation of skin changing function based on cookies

The above is the detailed content of VUE front-end cookie simple operation example sharing. For more information, please follow other related articles on the PHP Chinese website!

html5 jquery Cookie Session JS

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JavaScript realizes how to open a new window and close a window by clicking anywhere on the web pageNext article：JavaScript realizes how to open a new window and close a window by clicking anywhere on the web page

See more

VUE front-end cookie simple operation example sharing

Related articles