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