vue中，首页上输入数据通过点击利用localStorage存储并显示在历史记录页面，存在数据覆盖问题。

Question

问题描述

vue项目中，首页输入数据，利用localStorage保存并展示在历史记录页面，新的数据总是会覆盖旧的数据。

问题出现的环境背景及自己尝试过哪些方法

参考过类似问题下的解答，但是无法成功，尝试过利用数组，对象等。

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
发送数据：
clickdetail: function () {

var storage = window.localStorage
var contrastdata = {}
contrastdata.chepai = this.$refs.nowchepai.value
contrastdata.time = this.$refs.nowtime.innerText
contrastdata.chexin = this.$refs.nowchexin.value
storage.setItem('contrastdata', JSON.stringify(contrastdata))
}

接收数据：
var contrastdata = JSON.parse(storage.getItem('contrastdata'))
var chepai = contrastdata.chepai
var chexin = contrastdata.chexin
var time = contrastdata.time

你期待的结果是什么？实际看到的错误信息又是什么？

期待页面展示不存在数据覆盖问题，可以一行一行记录。

Answer 1

直接保存肯定会覆盖掉就的数据，解决办法，通过素组，对象，字符串都可以解决，前提是你不能直接吧新数据直接保存，要先读取老的数据，把新数据和老数据组合起来再保存

Answer 2

存一个数组，然后往里面push新的记录

Answer 3

我的想法是：
1.利用输入数据中的唯一值，在存储的时候创建一个唯一的key,而不是都使用'contrastdata'这一个key，都用一个key肯定会覆盖原有数据；
2.localstorage是有大小限制的，如果你的数据一直在累加，还需要考虑数据的删除问题，或者按某标准存储一定数量的数据，如最近10条数据或最近10天的数据，构造key的时候可以加上一些数据来便于判断是最近10条或最近10天里的哪一条数据，按先进先出的方式来替换。