2016-09-28 68 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.";