VueJS - 如何在localStorage中查看值？

Question

我有一個nav組件，只有在存儲localStorage中存在令牌時才需要顯示。當該標記從localStorage中刪除時，nav組件需要注意到該更改並隱藏自身。

解決此問題的最佳方法是什麼？

Answer 1

本地存儲沒有響應，所以你需要將你的令牌存儲在某個地方。我假設你的令牌正在被應用程序設置和刪除。如果是這樣，處理這個問題的最好方法是使用像Vuex這樣的狀態（see Vue State Management）。

選項1

如果您正在使用本地存儲，以保留多個瀏覽器會話的令牌，最好的選擇是僅設置在Vuex令牌，然後使用Vuex persisted state到Vuex同步到本地或會話存儲。當您需要重新建立狀態時，插件將再次檢索它。

選項2

如果你需要在本地存儲直接設置，你應該在你的突變設置/取消的localStorage的，當你正在改變狀態。這將使您的localStorage和狀態保持同步。

例如使用Vuex，如果你是在一個接收響應令牌，你可以調用的突變將其設置在Vuex狀態，以及將其設置爲localStorage的：

SET_TOKEN(state, payload){ 
    state.token = payload.token 
    localStorage.setItem('token', payload.token) 
} 

然後，您可以輕鬆地觀看Vuex狀態。取決於Vuex的設置，它可能類似於：this。$ store.state.token

Answer 2

隱藏您的導航欄不應與設置localStorage相關。我希望這樣的事情：

function hideNav() { 
    // Inform the application that the nav should hide 
    dispatchHideNavAction() 

    // Change localStorage 
    deleteTokenFromLocalStorage() 
} 

相反，如果你的問題是隱藏當令牌從另一個窗口中刪除的導航，那麼你可以使用StorageEvent：

window.addEventListener('storage', (e) => { 
    if (e.key === 'mytoken' && e.newValue === null) { 
    hideNav() 
    } 
}); 

NB：這不會在同一個窗口內工作，但只有當令牌從另一個選項卡中刪除。

Answer 3

假設您自己設置了令牌，請將該令牌存儲在全局狀態並將其保存爲vue-persistent-state。該插件適用於簡單的應用程序，其中不需要使用vuex進行狀態管理。

例如

import persistentStorage from 'vue-persistent-storage'; 

const initialState = { 
    token: 0 // overwritten if found in localStorage 
}; 
Vue.use(persistentStorage, initialState); 

new Vue({ 
    data: { 
    sections: ['Home', 'Edit'] 
    // we get `token` from persistentStorage 
    }, 
    template: `<nav> 
     <a 
     v-for="(section, i) in sections" 
     class="{ active: token === i }" 
     > 
     {{section}} 
     </a> 
    </nav>`, 
    methods: { 
    changeToken: function() { 
     // you may change token from other Vue instances too 
     this.token = this.token++ 
     // wrap 
     this.token = this.token % this.sections.length 
    } 
    } 
}) 

token可作爲中的所有組件和Vue的實例的數據。對this.token的任何更改都將存儲在localStorage中，您可以像在vanilla Vue應用程序中一樣使用this.token。

該插件基本上是觀察者和localStorage.set。您可以閱讀代碼here。它

1. 增加了mixin，使所有Vue的情況下initialState可用，
2. 表更改並將它們存儲。

免責聲明：我是vue-persistent-state的作者。