有的一些网站在第一次登录后,在指定的时间范围内容,下次在打开网站,再次登录时,不用每次都重新输入用户名的
或在做一些购物车效果时,也可以使用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 = 0i<arr.lengthi++) { // 遍历数组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.formif(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 autodisplay: flexjustify-content: center}.el-radio-group {display:flexjustify-content: left}.login {text-align: left} </style>
1
2
3
4
5
1
2
3
4
5
以上本示例中的源码,其中核心代码设置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 对象转换为字符串，并返回结果
}
1
2
3
1
2
3
设置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 = 0i<arr.lengthi++) { // 遍历数组arr var key_val = arr[i].split("=")// 获取key和val if(key_val[0] == 'username') { // 设置cookie的值到输入框this.form.name = key_val[1]// 这里就是在重新赋值,将cookie获取到的val进行赋值 }} }
},
1
2
1
2
总结
cookie它是浏览器document下的属性,是一种机制,只是提供了一个接口给js脚本进行使用,通过添加cookie以及expires达到保存多少天的效果
cookie的用途比较多,可以与服务器端进行交互,cookie的值是会随着表单的提交发送到服务器的,所以它可以作为一些特殊的字段来使用的
比如:服务端的session就需要依赖cookie
设置调用。JavaScript(简称“JS”)是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。该编程是通过设置调用浏览器显示到桌面的，是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程。
