vue 全选功能翻页保留前一页选择的状态

因项目要求，额外加一个全选按钮,需要用到 localstore

• 解决方案：
  ①监听选中状态的变化，如果变化了，存 localstore
  ②点击全选时，先获取localstore的值，将选中的值 push 到新数组中，在将新值存到localstore
  ③节点生成清除 localstore，选中值为空时清除 localstore

首先普及一下 localStorage用法

• 存

let str = 1
localStorage.setItem('token', 'str')
//对象需要转换
let obj = { id:1 }
obj = JSON.stringify(obj)
localStorage.setItem('token', 'obj ')

• 取

localStorage.getItem('token')

//对象
let obj = localStorage.getItem('token')
obj = JSON.parse(obj)

• 移除

 localStorage.removeItem('token')

• 涉及到一个数组去重

let newList = [1,2,3,4,5,1,2,3]
Array.from(new Set(newList))

项目页面

下面上代码：

data(){
return{
  // 表格选中的ID
  selectedRowKeys: [],
 },
 mounted() {
    localStorage.removeItem('selID') //进入页面的时候先清空一下localStorage
  },
watch: {
    selectedRowKeys: {
      handler(newValue, oldValue) {
       
		let str = JSON.stringify(newValue)
        localStorage.setItem('selID',str) // 值发生变化的时候重新存一下
        this.selectedRowKeys = newValue
         if (this.selectedRowKeys.length == 0) {   //如果选中的数据为空，删除localStorage
          localStorage.removeItem('selID')
        }
      }
    }
  },
   /* 全选功能 */
    onCheckAll() {
      let selectKey = []
      this.linkData.forEach(item => {
        selectKey.push(item.id)
      })
      if (selectKey.length == 0) return this.$message.warning('无数据可选')

       //获取 localStorage 中的数据，没有返回一个空数组
      var list = localStorage.getItem('selID') || []
      if (list.length !== 0) {  
        list = JSON.parse(list)  //不为空才去JSON.parse 不然报错
      }
      if (list.indexOf(...selectKey) == -1) { // 防止重复添加
        list.push(...selectKey)
      }
      //重新保存最新的数据
      list = JSON.stringify(list)
      localStorage.setItem('selID', list)
      var newList = localStorage.getItem('selID') || []
      newList = JSON.parse(newList)
      newList = Array.from(new Set(newList))  //数组去重
      this.selectedRowKeys = newList
    },