前端操作Cookie及实现表单记住用户名

目录

一、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代码。

 

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