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()(清空全部的本地数据)
当你使用这个方法的时候,本地全部的存储数据都会被清空。