資訊專欄INFORMATION COLUMN
摘要：刷新頁面，以前申請的內(nèi)存被釋放，重新加載腳本代碼，變量要重新賦值。要想刷新后數(shù)據(jù)不丟失就必須把數(shù)據(jù)存儲在外部，例如等。提供的種客戶端存儲數(shù)據(jù)的新方法存儲數(shù)據(jù)存儲的數(shù)據(jù)是永久性的，永不過期作用域是限定在文檔源級別的。
1. 原因
（1）js代碼是運(yùn)行在內(nèi)存中的，代碼運(yùn)行時的所有變量、函數(shù)都是保存在內(nèi)存中。2. HTML5提供的2種客戶端存儲數(shù)據(jù)的新方法
（2）刷新頁面，以前申請的內(nèi)存被釋放，重新加載腳本代碼，變量要重新賦值。
（3）要想刷新后數(shù)據(jù)不丟失就必須把數(shù)據(jù)存儲在外部，例如：Local Storage、Session Storage、Index DB等。這些都是瀏覽器提供的API，讓你可以將數(shù)據(jù)存儲在硬盤上，做持久化存儲。
localStorage存儲數(shù)據(jù)：
（1）存儲的數(shù)據(jù)是永久性的，永不過期；
（2）作用域是限定在文檔源級別的。同源的文檔間共享同樣的localStorage數(shù)據(jù)（不論該源的腳本是否真正的訪問localStorage）。
他們可以互相讀取對方的數(shù)據(jù)，甚至可以覆蓋對方的數(shù)據(jù)。但是，非同源的文檔間互相都不能讀取或者覆蓋對方的數(shù)據(jù)。
（即使他們運(yùn)行的腳本是來自同一臺第三方的服務(wù)器也不行）。
sessionStorage存儲數(shù)據(jù)：3.具體實現(xiàn)（登入后保存狀態(tài)，退出后移除狀態(tài)）
（1）會話，當(dāng)瀏覽器關(guān)閉時會話結(jié)束并清除數(shù)據(jù)，有時間期限；
（2）存儲數(shù)據(jù)的有效期和存儲數(shù)據(jù)的腳本所在的最頂層的窗口或者是瀏覽器標(biāo)簽頁是一樣的，一旦窗口或者標(biāo)簽頁被永久關(guān)閉了，
那么所有通過sessionStorage存儲的數(shù)據(jù)也都被刪除了。
// vuex mutations
const mutations = {
setToken(state, token) {
// 保存用戶認(rèn)證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;
},
// 獲取當(dāng)前用戶登錄信息
getUser(state) {
if(state.user === null) {
state.user = JSON.parse(sessionStorage.getItem("user"));
}
return state.user;
}
};
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/100822.html
摘要：免費升級到升級到后，服務(wù)器可以開啟版本，對比性能和緩存各方面要更好，還有其他新特性，可以啟動功能，更好的進(jìn)行離線緩存，更好的離線體驗。 showImg(https://segmentfault.com/img/remote/1460000012773891?w=370&h=661); 在線地址:https://fancy.czero.cn 手機(jī)掃描二維碼查看: showImg(http...
摘要：算法題現(xiàn)在有一組數(shù)據(jù)，一組因子，利用公式可以得到一個結(jié)果。和只能存儲字符串類型，對于復(fù)雜的對象可以使用提供的對象的和來處理應(yīng)用場景用于組件之間的傳值，，則主要用于不同頁面之間的傳值。例如表示數(shù)字到，表示匹配所有的大小寫字母。 1. 算法題：現(xiàn)在有一組數(shù)據(jù)，一組因子a,b,c，利用公式 x*a+y*b+z*c可以得到一個結(jié)果。問怎樣可以求出因子a,b,c對結(jié)果的影響？ 2. 介紹自己技術(shù)...
摘要：簡介用動態(tài)路由實現(xiàn)權(quán)限控制，是一個很的方案不是么初始路由只有登錄頁，根據(jù)用戶的查詢對應(yīng)的權(quán)限，然后，將獲取到的菜單數(shù)據(jù)放入和瀏覽器緩存中。 addRoutes簡介 用動態(tài)路由實現(xiàn)權(quán)限控制，是一個很nice的方案不是么？ 初始路由只有登錄頁，根據(jù)用戶的id查詢對應(yīng)的權(quán)限，然后addRoutes，將獲取到的菜單數(shù)據(jù)放入vuex和瀏覽器緩存中。 動態(tài)添加更多的路由規(guī)則。參數(shù)必須是一個符合 r...
閱讀 815·2023-04-25 22:57
閱讀 3066·2021-11-23 10:03
閱讀 627·2021-11-22 15:24
閱讀 3171·2021-11-02 14:47
閱讀 2915·2021-09-10 11:23
閱讀 3133·2021-09-06 15:00
閱讀 3955·2019-08-30 15:56
閱讀 3338·2019-08-30 15:52
