1. reason
js The code runs in memory , All variables at run time , Functions are also stored in memory .
Refresh page , Previously requested memory is released , Reload script code , Variable reassignment , So these data must be stored externally if they want to be stored , for example ：Local Storage,Session
Storage,Index DB etc . These are provided by the browser API, It allows you to store data on your hard disk , Make persistent storage . Choose which one according to your actual needs .
Two , Solution
Storing data on the client side ：
HTML5 Provided 2 A new method of storing data in client ：localStorage There is no time limit , Unless you remove it ,sessionStorage That is, conversation , The session ends when the browser closes , There is a time limit , With its own Baidu .
before , It's all made up of cookie Completed , however cookie Not suitable for large amount of data storage , Because they are delivered by every request to the server , This makes cookie It's very slow , And it's not efficient .
web Storage is divided into localStorage individual sessionStorage.
The difference lies in the validity and scope of the storage .
adopt localStorage The stored data is permanent , Unless web Application deliberately delete stored data , Or the user can set the browser configuration （ Browser specific UI） To delete , Otherwise, the data will always be saved on the user's computer , Never expire .
localStorage The scope of is limited at the document source level . Documents of the same origin share the same information localStorage data （ Whether or not the script of the source is actually accessed localStorage）. They can read each other's data , It can even cover each other's data . however , Non homologous documents cannot read or cover each other's data .（ Even if they are running scripts from the same third-party server, it will not work ）.
sessionStorage The validity period of stored data is the same as that of the topmost window or browser tab where the script is stored , Once the window or tab is permanently closed , Well, all of them passed sessionStorage The stored data has also been deleted .
I use it here sessionStorage, Here's something to note vuex The variables in are responsive , and sessionStorage no , When you change vuex Status in , The component detects the change , and sessionStorage Not at all , The page needs to be refreshed to see the changes ,
So let's vuex State in sessionStorage Get from , This allows the component to respond to changes
Three , Concrete realization
The application background is the saved state after the user logs in , Remove status after exit
//mutations ADD_LOGIN_USER (state,data) { // Login , Save state
sessionStorage.setItem("username", data); // Add to sessionStorage
sessionStorage.setItem("isLogin",true); state.username=data, // Synchronous change store Status in
state.isLogin=true }, SIGN_OUT (state) { // sign out , deleted state
sessionStorage.removeItem("username"); // remove sessionStorage
sessionStorage.removeItem("isLogin"); state.username='' // Synchronous change story Status in
state.isLogin=false } //getters isLogin (state) { if (!state.isLogin) {
state.isLogin=sessionStorage.getItem('isLogin'); // from sessionStorage Read status in
state.username=sessionStorage.getItem('username'); } return state.isLogin }
The overall idea is to let vuex in store From the state of sessionStorage Value , And with sessionStorage bring into correspondence with
getters:{ userInfo(state){ if(!state.userInfo){ state.userInfo =
JSON.parse(sessionStorage.getItem('userInfo')) } return state.userInfo } },
mutations:{ LOGIN:(state,data) => { state.userInfo = data;
sessionStorage.setItem('userInfo',JSON.stringify(data)); }, LOGOUT:(state) => {
state.userInfo = null; sessionStorage.removeItem('userInfo'); } },
ps: It should be noted that state Inside userInfo Initialization must be null, instead of {}, Otherwise, that judgment will always be wrong true La （ A small personal problem ）
Technology