有的一些网站在第一次登录后,在指定的时间范围内容,下次在打开网站,再次登录时,不用每次都重新输入用户名的
或在做一些购物车效果时,也可以使用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
1. 调用后端接口导出文件
示例下载接口url https://gold-cdn.xitu.io/extension/0.3.9/package.crx
1.1 window.open(url)
会打开一个新窗口，开始下载后会自动关闭新窗口。Safair 下载后没有关闭新窗口。
Chrome、IE、Safair支持，貌似火狐不支持
1.2 window.location=url
在当前窗口下载
Chrome、Safair支持
1.3 iframe
在HTML中，iframe 的属性用src，但在JS中，只有部份浏览器支持修改src(读是没问题)，真正通用的是要修改对应框架的href值。
1.4 <a href="url" download="filename">点击链接下载</a>
HTML5中给a标签增加了一个download属性，只要有这个属性，点击这个链接时浏览器就不在打开链接指向的文件，而是改为下载，目前只有chrome、firefox、opera、Edge支持。常用此方法点击下载图片。
IE既不支持a标签的download属性也不允许js调用a 标签的click方法。
2. 前端直接导出文件到本地
2.1 将数据转成DataURI用<a>标签下载
<a href="DataURI" download="filename">点击链接下载</a>
Data URI Scheme
Data URI Scheme是指可以在Web 页面中包含图片但无需任何额外的HTTP 请求的一类URI。 Data URI Scheme一般用于将经过base64编码的数据嵌入网页中，从而减少请求资源的链接数。IE8 之前的版本都不支持 data URI scheme。
DataURI的格式：
生成DataURI的方式
1. encodeURIComponent
使用这种方式，当数据过多时，URI长度容易超出浏览器限制。 encodeURIComponent常用来转码接口参数，为了避免服务器收到不可预知的请求，对任何用户输入的作为URI部分的内容都需要用encodeURIComponent进行转义。
2. URL.createObjectURL
URL.createObjectURL的参数是File对象或者Blob对象
IE10以下不支持URL.createObjectURL
2.2 windows.navigator.msSaveBlob IE10~Edge 专用
msSaveBlob 是IE10~Edge 私有方法。
2.3 execCommand
有的资料有提到IE9可以使用execCommand方法来保存数据到本地文件，但是我自己没有验证过，不知道是否可行。而且MDN文档中execCommand没有查到SaveAs命令。这块只是做个小记录。
js数据直接导出/下载数据到本地到方法总结
本文转载自：https://juejin.im/post/5cd00253518825418f6f2a8c?utm_source=gold_browser_extension
function fake_click(obj) {
var ev = document.createEvent("MouseEvents")
ev.initMouseEvent(
"click", true, false, window, 0, 0, 0, 0, 0
, false, false, false, false, 0, null
)
obj.dispatchEvent(ev)
}function export_raw(name, data) {
var urlObject = window.URL || window.webkitURL || window
var export_blob = new Blob([data])
var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
save_link.href = urlObject.createObjectURL(export_blob)
save_link.download = name
fake_click(save_link)
}
