JS 如何利用浏览器的 cookie 保存用户名

news2025/4/5 19:02:25

前言

浏览器的cookie可以用来存储一些少量的网站信息,比如登录的用户名,用于提高用户体验非常有帮助

有的一些网站在第一次登录后,在指定的时间范围内容,下次在打开网站,再次登录时,不用每次都重新输入用户名的

或在做一些购物车效果时,也可以使用cookie,保持一个状态持续多长时间的

具体示例代码

代码如下所示,以Vue为示例

<template><div class="wrap"><div class="content"><el-form ref="form" :model="form" label-width="100px"><el-form-item label="用戶名"><el-input v-model="form.name" class="input" clearable></el-input></el-form-item><el-form-item label="密码"><el-input type="password" class="input" v-model="form.pass" clearable></el-input></el-form-item><el-form-item label="记住用户名"><el-radio-group v-model="form.date" size="mini" @change="handleCheck" class="el-radio-group"><el-radio :label="3" border>保存3天</el-radio><el-radio :label="7" border>保存7天</el-radio><el-radio :label="10" border>保存10天</el-radio><el-radio :label="30" border>保存30天</el-radio></el-radio-group></el-form-item><el-form-item class="login"><el-button type="primary" @click="onLogin">登录</el-button></el-form-item></el-form></div></div>
</template>

<script> export default {data() {return { form: {name: '',pass: '',date: 7,}}},mounted() {this.getCookie('username');console.log(this.form.name);},methods: {handleCheck(val) {console.log(val);this.form.date = val;// 多少天以后失效,这里默认设置的是7天,需要转化成时间戳秒},// 设置cookie,包括key名,value,值,过期时间expiredayssetCookie(user,val,expiredays) {// 把用户名保存进cookie里面document.cookie = `${user}=${val}`var exdate = new Date(); // 当前时间exdate.setTime(exdate.getDate() + expiredays*24*3600*1000);// 设置时间,多少天失效// 设置为新的值document.cookie += `;'expires='${exdate.toGMTString()}`; // 根据格林威治时间 (GMT) 把 Date 对象转换为字符串，并返回结果 console.log(document.cookie)  },  getCookie() { // 提取当前的cookie let c = document.cookie; // 提取key为username的cookie值 if(c != '' && c.indexOf('username') > -1) {var arr = c.split(';');// 以分号,将cookie进行拆分存到一个arr数组中for(var i = 0;i<arr.length;i++) { // 遍历数组arr var key_val = arr[i].split("=");// 获取key和val if(key_val[0] == 'username') { // 设置cookie的值到输入框this.form.name = key_val[1]; }} }},onLogin() {const user = 'username'const {name,date} = this.form;if(name) { this.setCookie(user,name,date); this.$message({message: `用户名的cookie已经设置成功,刷新页面时仍然是显示的,保存${date}天时间`,type: 'success',duration: '5000'});console.log('submit!'); }else {this.$message.error('用户名不能为空')}}},}; </script>
<style> .wrap {text-align: left;}.content {margin: 10px auto;display: flex;justify-content: center;}.el-radio-group {display:flex;justify-content: left;}.login {text-align: left;} </style>

以上本示例中的源码,其中核心代码设置cookie如下所示

// 如果是在原生js里,需要写function,上面的是vue的代码,省略了function 的
function setCookie(user,val,expiredays) {// 把用户名保存进cookie里面document.cookie = `${user}=${val}`var exdate = new Date(); // 当前时间exdate.setTime(exdate.getDate() + expiredays*24*3600*1000);// 设置时间,多少天失效// 设置为新的值document.cookie += `;'expires='${exdate.toGMTString()}`; // 根据格林威治时间 (GMT) 把 Date 对象转换为字符串，并返回结果
}

设置cookie主要需要有cookie名,它是键值对的,还需要一个设置一个过期时间

使用document.cookie可以读取cookie,也可以重新设置cookie

而获取cookie,需要将从cookie中拿到指定的cookie,需要通过split,先拆,然后在获取指定的cookie值,重新在设置值的,更多的新手同学,可能就是卡在怎么去拆的,然后取到对应的值的，其实,代码也很简单

具体代码如下所示

function getCookie() { // 提取当前的cookie let c = document.cookie; // 提取key为username的cookie值 if(c != '' && c.indexOf('username') > -1) {var arr = c.split(';');// 以分号,将cookie进行拆分存到一个arr数组中for(var i = 0;i<arr.length;i++) { // 遍历数组arr var key_val = arr[i].split("=");// 获取key和val if(key_val[0] == 'username') { // 设置cookie的值到输入框this.form.name = key_val[1]; // 这里就是在重新赋值,将cookie获取到的val进行赋值 }} }
 },