2016-09-28 66 views
0

最近我遇到了如何在单个页面应用程序中存储数据的问题。在单页面应用程序中,如何在刷新页面后存储数据和获取数据

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

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

刷新

之前

before refresh

刷新后

enter image description here

谁能提供有关如何以及在何处存储数据的一些建议吗?

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

此外,另一种方式是每次页面刷新后从服务器再次获取数据,这是一种合适的方式吗?

顺便说一句,我正在使用Vue.js.

感谢

+0

'localStorage'似乎是一个不错的主意。为什么不尝试呢? – Xufox

+3

这取决于。数据如何被使用?有许多用于不同用途的存储机制。 Cookies,localStorage,sessionStorage,数据库,查询参数等等。 – tcooc

+0

您可以使用本地存储,但您应该决定何时使数据无效。在您的情况下,用户可能会在另一个浏览器中重命名自己,并且您永远不会知道它 – Maxx

回答

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

0

的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.";