コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > VUEフロントエンドCookieの簡単な操作例共有

VUEフロントエンドCookieの簡単な操作例共有

小云云
リリース： 2018-01-15 11:17:58
オリジナル
2633 人が閲覧しました

この記事では主に VUE フロントエンド Cookie の簡単な操作コードを詳しく紹介します。興味のある方は参考にしていただければ幸いです。

以下は簡単な Cookie 操作であり、現時点ではフロントエンドの例のみです。具体的な内容は次のとおりです

注意すべき点は 2 つあります:

1. Cookie コンテンツ ストレージの名前
2.有効期限を過去の時刻に設定することで実現


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

<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>

ログイン後にコピー

関連する推奨事項:

HTML5 Web キャッシュとアプリケーション キャッシュ (Cookie、セッション)

jQuery と jQuery.cookie.js プラグインを組み合わせて、スキン変更機能の実装例

jQueryベース スキン変更機能のCookie実装例

以上がVUEフロントエンドCookieの簡単な操作例共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
cookie ie 例
前の記事：JavaScript は、Web ページ上の任意の場所をクリックして新しいウィンドウを開いたり、ウィンドウを閉じたりする方法を実現します。 次の記事：ユーザーがページを操作したかどうかを判定するJavaScriptについて詳しく解説
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート