vue登录如何存储cookie_浏览器动态存储数据/vue cookie

使用cookie完成浏览器动态存储

动态记录.png

描述

1.点击参与项目cell时，在没有任何输入的情况下，下拉框记录最近选择的前5条

2.当选择项目时，会根据此项目，把之前选择的审批人，工作类型一并带出

开发思路

1.使用数组记录下选择的项目，以项目id为统一标识，push项目对象。

2.当选择项目审批人或者工作类型时，首先更新记忆数组this.getHistory()，判断此行的项目是否填写，填了判断此时记忆数组中是否有此项目，有就把项目审批人/工作类型添加到数组中。

3.设置深度监听记忆数组，当数组内对象改变或者数组长度变化时，进行cookie储存记忆。

获取下拉框数据

初始化页面时，this.getHistory()，得到记忆数组

//获取填写记录

getHistory() {

var res = this.$cookies.get('historyList' + localStorage.getItem('id'))

this.historyList = JSON.parse(res) || new Array()

// console.log(this.historyList)

},

cookie只能保存字符串，所以要json转换

//深度监听记忆数组

historyList: {

handler: function (newVal