在单页面应用程序中，如何在刷新页面后存储数据并获取数据

Question

最近我遇到了如何在单页应用程序上存储数据的问题。

我想询问如何在单页应用程序中的刷新页面之后存储数据并获取数据。

例如，我获得了'用户名'，它显示在导航栏上，但刷新页面后，“用户名”消失了。 “用户名”是一个javascript变量。

刷新前

刷新后

有人可以就如何以及在何处存储数据提出一些建议吗？

在localStorage还是其他地方？什么应该是标准或正确的方式？

另外，另一种方法是每次在页面刷新后从服务器再次获取数据，这是正确的方法吗？

BTW，我正在使用Vue.js。

由于

Answer 1

正确的方法是使用sessionStorage，因为当您的浏览器关闭时，该变量将被删除

 // Save data to sessionStorage
sessionStorage.setItem('key', 'value');

// Get saved data from sessionStorage
var data = sessionStorage.getItem('key');

// Remove saved data from sessionStorage
sessionStorage.removeItem('key')

https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

Answer 2

sessionStorage对象类似于localStorage对象，只是它只存储一个会话的数据。当用户关闭特定浏览器选项卡时，将删除数据。根据您的要求，这似乎更合适。

示例：

if (sessionStorage.clickcount) {
      sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
      sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";