js el-table（将表格数据保存到本地存储即浏览器缓存以及localStorage.removeItem进行删除指定的存储数据和localStorage.clear清空全部的存储数据的使用）

2023.1.31今天我学习了如何将表格的数据添加之后保存到本地存储中。

一、localStorage.getItem()（获取全部的本地数据）

二、localStorage.setItem()（存放全部的本地数据）

三、localStorage.removeItem()（根据key值清除指定的本地数据）

四、localStorage.clear()（清空全部的本地数据）

一、localStorage.getItem()（获取全部的本地数据）+  二、localStorage.setItem()（存放全部的本地数据）

效果：

保存前：

 保存后：

 保存的位置为：

 代码如下：

设置一个保存按钮以及@chick方法

（1）保存，localStorage.setItem为保存数据的方法。

  // 实现保存按钮的方法
    saveAllData() {
      // 转换成json格式
      let allData = [{
        rows: JSON.stringify(this.dataList),
        columnName: JSON.stringify(this.columnName)
      }
      ]

      // 实现保存到本地的方法（时间戳+保存数据）
// this.KEY可以是任意字符串
      localStorage.setItem(this.KEY, JSON.stringify(allData))

    },

（2）读取，localStorage.getItem为读取数据的方法

// 获取本地缓存数据
    getData() {
      this.new_Data = localStorage.getItem(this.KEY)
      return JSON.parse(this.new_Data)
    },

getData函数名随便取，只要能在created加载就行。

三、localStorage.removeItem()（根据key值清除指定的本地数据）

 

可以根据key的值来进行删除指定的本地文件，所以你的key最好是要不同且唯一。

四、localStorage.clear()（清空全部的本地数据）

当你使用这个方法的时候，本地全部的存储数据都会被清空。