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

http://mpvideo.qpic.cn/0b2ewqakkaaazmanv6tiyzrvbngduw2abjia.f10002.mp4?dis_k=ba02c8af43e8803236730e622b85388b&dis_t=1670378876&vid=wxv_2654163895754113028&format_id=10002&support_redirect=0&mmversion=false

前言

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

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

具体示例JS 如何利用浏览器的 cookie 保存用户名

(https://coder.itclan.cn/fontend/js/33-cookie-save-user/)

具体示例代码如下所示代码语言：javascript复制

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

代码语言：javascript复制// 如果是在原生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值,重新在设置值的

具体代码如下所示

代码语言：javascript复制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

var key_val = arr[i].split("="); // 获取key和val

if(key_val[0] == 'username') { // 设置cookie的值到输入框

this.form.name = key_val[1]; // 这里就是在重新赋值,将cookie获取到的val进行赋值

}

}

}

}

总结cookie它是浏览器document下的属性,是一种机制,只是提供了一个接口给js脚本进行使用,通过添加cookie以及expires达到保存多少天的效果

cookie的用途比较多,可以与服务器端进行交互,cookie的值是会随着表单的提交发送到服务器的,所以它可以作为一些特殊的字段来使用的

比如:服务端的session就需要依赖cookie