目錄

一、Cookie主要屬性

二、瀏覽器對Cookie的大小和個數限制

三、Js設定、讀取及清除Cookie

四、vue-cookies實現cookie操作

    寫登入頁面的時候，為了提升使用者體驗，加入表單記住使用者名稱功能，這樣使用者下次登入的時候，前端可以根據之前使用者登入過的使用者名稱資訊實現自動填充。此功能主要通過cookie實現。這裡討論的是純前端操作cookie，不涉及伺服器。

    Cookie是一小段字串文字，在瀏覽器和伺服器之間傳遞的時候可以識別使用者身份，但是此文我們不涉及伺服器，討論的是通過js操作cookie實現一些不敏感資訊的記錄。cookie由瀏覽器操作和管理，資料儲存在本地計算機中，所以存在安全隱患，不建議用來儲存一些私密資訊

一、Cookie主要屬性

    1)【name】，cookie名稱，必須使用只能用在URL中的字元，一般用字母及數字。

    2)【value】，cookie值，要求同cookie的名稱。

    3)【expires】，過期日期，GMT格式，資料過期後，瀏覽器會清除該cookie，不設定時，對應Cookie在瀏覽器關閉後消失。

    4)【path】，路徑，預設是“/”，表示同一個站點的所有頁面都可以訪問該cookie，如果設定為“/home”，則只有“/home”的子頁面可以獲取，例如“/home/user”。

    5)【secure】，安全性，布林值，預設是false，一般的http請求即可訪問，值為true時，只有使用https協議連線時cookie才可以被頁面訪問。

    6)【httpOnly】，布林值，預設false，如果設定為true，那麼通過程式(JS指令碼、Applet等)將無法讀取到cookie資訊。

二、瀏覽器對Cookie的大小和個數限制

    個數：IE6限制20個，IE（6以後的）、Firefox限制50個，Opera限制30個，Safari沒有個數限制，Chrome限制53個

    大小：Firefox、Safari 限制4097位元組，Opera 限制4096位元組，IE限制4095位元組，  Chrome限制4097位元組

    在實際使用中，儘量保證cookie小於20個

三、Js設定、讀取及清除Cookie

    控制檯的【Application】下可以檢視當前頁面的cookie

    Js可以通過document.cookie讀取頁面的cookie

    沒有直接封裝好的方法實現cookie操作，需要我們自己寫。我用的是vue + element，邏輯是【使用者第一次登入】--【設定cookie記錄有效的使用者名稱】--【使用者下次登入操作時，把cookie中的值拿出來，配合el-autocomplete實現自動填充使用者名稱】，不是使用element，原理也是一樣，只要從cookie中取得自己需要的值，就可以處理成自己需要的效果。直接上demo程式碼。

<template>
  <div class="login">使用者名稱：
    <el-autocomplete
      class="inline-input"
      v-model="userName"
      :fetch-suggestions="querySearch"
      placeholder="請輸入內容">
    </el-autocomplete>
    <el-button type="primary" plain @click="login">登入</el-button>
    <el-button type="primary" plain @click="clearCookie">清除cookie</el-button>
  </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      userName: '',
      cookieNames: [] // cookie中使用者名稱資料，根據el-autocomplete要求設定格式
    }
  },
  mounted: function () {
    this.getCookie()
    // ***********  vue-cookies  **********
    // console.log(this.$cookies.get('name'))
    // ************************************
  },
  methods: {
    // 使用者登入
    login: function () {
      // ***********  vue-cookies  **********
      // this.$cookies.set('name', 'may')
      // ************************************
      // this.setCookie(值, 過期天數)
      this.setCookie(this.userName, 7)
    },
    querySearch: function (queryString, cb) {
      var cookieNames = this.cookieNames
      var results = queryString ? cookieNames.filter(this.createFilter(queryString)) : cookieNames
      // 呼叫 callback 返回建議列表的資料
      cb(results)
    },
    createFilter: function (queryString) {
      return (cookieNames) => {
        return (cookieNames.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    // 設定cookie
    setCookie: function (userName, exdays) {
      // 獲取時間
      var exdate = new Date()
      // 儲存的天數,setTime() 方法以毫秒設定 Date 物件
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays)
      // 如果使用者用一個以上的使用者名稱登入系統，那麼應當存多個值到cookie中，但是cookie的keyname是唯一的，
      // 如果每次都設定相同的keyname，後一次的值會覆蓋前一次的值，如果每次都設定不同的keyname值，如name1、name2，
      // 一個頁面對cookie的數量有限制，效果不好；考慮陣列的形式，但是js中陣列無法直接儲存為Cookie，
      // 綜上，我採用拼接字串的方法，用“&”做分隔符，把不同的使用者名稱拼接成一個字串，讀取的時候再處理得到多個數據
      // 2018.12.12更新，我這裡預設cookie裡面只有一個userName，沒有其他鍵值對，如果存在多個鍵值對，處理資料的時候就要考慮多一點，我就不再詳細寫程式了
      var nameupdate
      if (document.cookie.length === 0) {
        // 第一次操作
        nameupdate = userName
      } else {
        // 取出cookie中各個使用者名稱的值，與當前值比較，如果當前值已存在，不改變cookie，否則寫入新的cookie
        var data = document.cookie.split('=')[1].split('&')
        for (let i = 0; i < data.length; i++) {
          if (data[i] === userName) {
            return
          }
        }
        nameupdate = document.cookie.split('=')[1] + '&' + userName
      }
      // 字串拼接cookie，toGMTString() 方法根據格林威治時間 (GMT) 把 Date 物件轉換為字串
      document.cookie = 'userName' + '=' + nameupdate + ';path=/;expires=' + exdate.toGMTString()
    },
    // 讀取cookie
    getCookie: function () {
      if (document.cookie.length > 0) {
        // 處理資料，這裡有很多方式處理字串，split()、substring()、indexOf()等等
        // 得到cookie中userName的值，一個拼接的字串
        var data1 = document.cookie.split('=')[1]
        // 得到各個使用者名稱的值，value2是一個數組
        var data2 = data1.split('&')
        this.cookieNames = []
        for (let i = 0; i < data2.length; i++) {
          let obj = {}
          obj.value = data2[i]
          this.cookieNames.push(obj)
        }
      }
    },
    // 清除cookie
    clearCookie: function () {
      // 修改天數為負就可以清除cookie,這裡寫-1天
      this.setCookie('', -1)
    }
  }
}
</script>

<style scoped>
.login{
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin-top: 50px;
}
</style>

四、vue-cookies實現cookie操作

    在vue專案中，可以直接使用vue-cookies來操作cookie

    官方文件很清楚：https://www.npmjs.com/package/vue-cookies

    安裝及引入

npm install vue-cookies --save

// main.js

import VueCookies from 'vue-cookies'

Vue.use(VueCookies)

    基本使用

    1、設定cookie

this.$cookies.set(keyName, value, expireTimes)

    expireTime預設是一天，值可以是“1d”/“1D”（表示天數）、數值（單位是秒）、或者Date。

    expireTime的值為“0”（字元型）時表示頁面關閉的時候清空cookie

    2、讀取cookie

this.$cookies.get(keyName)

    3、清除cookie

this.$cookies.remove(keyName)

    也可以通過設定expireTime為負的方式清除cookie，但是隻能取-1，其他負數是非法的

this.$cookies.set(keyName, -1)

    參考文章

    https://blog.csdn.net/cheeseandcake/article/details/72794749