vuexページのリフレッシュ後にデータが失われました
1882 ワード
1.原因
(1)jsコードはメモリで実行され,コード実行時のすべての変数,関数はメモリに保存される.
(2)ページをリフレッシュし,以前に申請したメモリが解放され,スクリプトコードが再ロードされ,変数が再割り当てされる.
(3)リフレッシュ後にデータが失われないようにするには,Local Storage,Session Storage,Index DBなど,外部にデータを格納する必要がある.これらはすべてブラウザが提供するAPIで、データをハードディスクに保存し、持続的なストレージを行うことができます.
2.HTML 5が提供する2種類のクライアントがデータを格納する新しい方法
localStorageストレージデータ:
(1)格納されたデータは永久的で、期限が切れない.
(2)役割ドメインは文書ソースレベルに限定される.ソースのスクリプトが本当にlocalStorageにアクセスしているかどうかにかかわらず、同じlocalStorageデータをソースのドキュメント間で共有します.
彼らは互いに相手のデータを読み取ることができて、甚だしきに至っては相手のデータを上書きすることができます.ただし,非同源の文書間では互いに相手のデータを読み取ったり上書きしたりすることはできない.
(彼らが実行しているスクリプトが同じサードパーティからのサーバであってもだめです).
sessionStorageストレージデータ:
(1)ブラウザが閉じるとセッションが終了してデータが消去され、期間があるセッション.
(2)データを格納する有効期間は、データを格納するスクリプトが存在する最上位のウィンドウまたはブラウザのラベルページと同じであり、ウィンドウまたはラベルページが永久に閉じられると、
では、sessionStorageに格納されているすべてのデータも削除されます.
3.具体的な実装(登録後保存状態、終了後削除状態)
(1)jsコードはメモリで実行され,コード実行時のすべての変数,関数はメモリに保存される.
(2)ページをリフレッシュし,以前に申請したメモリが解放され,スクリプトコードが再ロードされ,変数が再割り当てされる.
(3)リフレッシュ後にデータが失われないようにするには,Local Storage,Session Storage,Index DBなど,外部にデータを格納する必要がある.これらはすべてブラウザが提供するAPIで、データをハードディスクに保存し、持続的なストレージを行うことができます.
2.HTML 5が提供する2種類のクライアントがデータを格納する新しい方法
localStorageストレージデータ:
(1)格納されたデータは永久的で、期限が切れない.
(2)役割ドメインは文書ソースレベルに限定される.ソースのスクリプトが本当にlocalStorageにアクセスしているかどうかにかかわらず、同じlocalStorageデータをソースのドキュメント間で共有します.
彼らは互いに相手のデータを読み取ることができて、甚だしきに至っては相手のデータを上書きすることができます.ただし,非同源の文書間では互いに相手のデータを読み取ったり上書きしたりすることはできない.
(彼らが実行しているスクリプトが同じサードパーティからのサーバであってもだめです).
sessionStorageストレージデータ:
(1)ブラウザが閉じるとセッションが終了してデータが消去され、期間があるセッション.
(2)データを格納する有効期間は、データを格納するスクリプトが存在する最上位のウィンドウまたはブラウザのラベルページと同じであり、ウィンドウまたはラベルページが永久に閉じられると、
では、sessionStorageに格納されているすべてのデータも削除されます.
3.具体的な実装(登録後保存状態、終了後削除状態)
// vuex mutations
const mutations = {
setToken(state, token) {
// Token
sessionStorage.setItem('token', token);
state.token = token;
},
setUser(state, user) {
//
sessionStorage.setItem('user', JSON.stringify(user));
state.user = user;
},
// ， token
logout(state) {
state.token = null;
state.user = null;
sessionStorage.removeItem('token');
sessionStorage.removeItem('user');
}
};
// vuex getters
const getters = {
getToken(state){
if(state.token === null){
state.token = sessionStorage.getItem('token')
}
return state.token;
},
//
getUser(state) {
if(state.user === null) {
state.user = JSON.parse(sessionStorage.getItem('user'));
}
return state.user;
}
};