有的一些网站在第一次登录后,在指定的时间范围内容,下次在打开网站,再次登录时,不用每次都重新输入用户名的
或在做一些购物车效果时,也可以使用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
js调用浏览器自带的将视频另存为的方法如下：1、打开HBuilderX开发工具，在已新建的Web项目中，创建一个静态页面文件saveAs.html。
2、打开已新建的静态页面文件，修改title标签中的文本内容。
3、在标签中，插入一个img标签和button标签。
4、在标签中，添加按钮点击事件，调用execCommand()方法。
5、保存代码并运行项目，打开浏览器查看界面效果，并点击按钮。
1、手机的内存满了浏览器不能使用了。
2、浏览器与手机的兼容性问题导致的重新登陆一下或是卸载浏览器重新安装低版本的以适应手机的操作系统。
3、一些其他问题建议拨打微信客服电话或是联系在线客服寻求帮助。
4、终极解决办法手机备份之后恢复出厂设置不到万不得已建议不要使用。
