前端操作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