实时自动将折线图更新并持久保存到当前日期

Question

正在尝试建立一个监视系统，该系统监视用户的活动和行为，并以图形方式实时显示折线图中的数据。 当前，当从服务器接收到新数据时，能够使用Web套接字实时更新图表。

挑战

1. 即使没有从服务器接收到用户数据，我也希望能够将图表自动更新为当前日期/时间（第二天）。

2. 保留数据以避免将用户恢复到图表的前一天

场景

上次用户活动是 3月20日，因此，数据显示在图表上的时间是 3月20日，但是当当前日期更改为 3月21日时>我希望图表自动更新为21，即使用 {x：Mar 21 y：0} ，并在从服务器上的服务器接收到数据时进一步更新 {y} 。同一天，由于此类情况的更新将在客户端进行，因此我想知道如何持久保存此类数据，即在客户端 {x：Mar 21 y：0} 以避免恢复到前一天在页面上重新加载

示例代码（非持久性）

let lastDate = current day;
let data = []

function getNextDay(baseval) {
  var newDate = baseval + 86400000;
  lastDate = newDate;
  data.push({
    x: newDate,
    y: 0
  })
}

// calling getNextday function

 updateToNextDay() {
      window.setInterval(() => {
        getNextDay(lastDate)
        this.$refs.realtimeChart.updateSeries([{
          data: data
        }])
      }, 86400000)

上面的代码自动将下一个日期 x：newDate 和 y：0 推送到数据，并且该图表会按照setTimeInterval进行更新。但是可以看出，用户重新加载页面后，这些数据将立即丢失。

我的想法

我正在考虑使用localstorage在浏览器中保留数据

最后

我想知道在我的情况下如何解决这种情况

谢谢。