localStorage.setItem()使用 && 切換主題的方法

什么是localStorage

在HTML5中,新加入了一個localStorage特性柠傍,這個特性主要是用來作為本地存儲來使用的,解決了cookie存儲空間不足的問題(cookie中每條cookie的存儲空間為4k)拂募,localStorage中一般瀏覽器支持的是5M大小酪捡,這個在不同的瀏覽器中l(wèi)ocalStorage會有所不同痪署。

localStorage的優(yōu)勢

1、localStorage拓展了cookie的4K限制
2谁榜、localStorage會可以將第一次請求的數(shù)據(jù)直接存儲到本地幅聘,這個相當(dāng)于一個5M大小的針對于前端頁面的數(shù)據(jù)庫,相比于cookie可以節(jié)約帶寬窃植,但是這個卻是只有在高版本的瀏覽器中才支持的
3帝蒿、localStorage與sessionStorage的唯一一點區(qū)別就是localStorage屬于永久性存儲,而sessionStorage屬于當(dāng)會話結(jié)束的時候撕瞧,sessionStorage中的鍵值對會被清空

localStorage的使用

localStorage.getItem(key):獲取指定key本地存儲的值
localStorage.setItem(key,value):將value存儲到key字段

在實際開發(fā)中陵叽,當(dāng)我們退出系統(tǒng)的時候要清除系統(tǒng)中所有的緩存

<el-menu-item index="5-3" @click="exit">退出系統(tǒng)</el-menu-item>
 // 退出系統(tǒng)
    exit(){
      // 清除所有的緩存
      localStorage.clear()
      sessionStorage.clear()
      this.$router.push('/')
    }

切換主題 安裝Element Plus組件庫

安裝

npm install element-plus --save

在main.js中導(dǎo)入

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)

在開發(fā)當(dāng)中會有一個切換主題的應(yīng)用,怎么做呢丛版?
首先在store文件夾中新建一個module文件夾巩掺,在建一個theme.js文件
namespaced:true是為了解決不同模塊命名沖突的問題

export default {
    // 為了解決不同模塊命名沖突的問題,將不同模塊的namespaced:true
    namespaced:true,
    state: {
        // 當(dāng)前使用的主題索引
        themeActive:0,
        // 主題數(shù)據(jù)
        themes:[
            {
                name:'藍(lán)色主題',
                value:'#101f30'
            },
            {
                name:'紅色主題',
                value:'#f0c9cf' 
            },
            {
                name:'黃色主題',
                value:'#bacf65'
            },
            {
                name:'綠色主題',
                value:'#9abeaf'
            },
            {
                name:'紫色主題',
                value:'#74759b'
            }
        ]
    },
    mutations: {
        updateThemeActive(state,val){
            state.themeActive = val
        }
    },
    actions: {
        updateThemeActive(store,val){
            store.commit('updateThemeActive',val)
        }
    },
  }

標(biāo)簽里面的樣式

<div class="left" :style="{background:sun}"></div>

在導(dǎo)航欄里面的菜單引入

:background-color="sun"

切換主題的方法

 methods: {
    changeTheme(index){
      // 獲取/切換 對應(yīng)的主題   theme是模塊
      // 更新主題索引
      this.$store.dispatch('theme/updateThemeActive',index)
      // 將主題索引在瀏覽器中保存一份
      localStorage.setItem('themeActive',index)
      // let theme = this.$store.state.theme.themes[index]
    },
  },
mounted() {
    let index = localStorage.getItem('themeActive')
    if(index){
      // 更新主題索引
       this.$store.dispatch('theme/updateThemeActive',index)
    }
  },
 computed:{
    // 返回所有的主題信息
    themes(){
      return this.$store.state.theme.themes
    },
    // 返回當(dāng)前主題顏色
    sun(){
      return this.$store.state.theme.themes[this.$store.state.theme.themeActive].value
    },
  },
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末页畦,一起剝皮案震驚了整個濱河市胖替,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖独令,帶你破解...
    沈念sama閱讀 222,865評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件端朵,死亡現(xiàn)場離奇詭異,居然都是意外死亡燃箭,警方通過查閱死者的電腦和手機(jī)冲呢,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,296評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來招狸,“玉大人敬拓,你說我怎么就攤上這事∪瓜罚” “怎么了乘凸?”我有些...
    開封第一講書人閱讀 169,631評論 0 364
  • 文/不壞的土叔 我叫張陵,是天一觀的道長累榜。 經(jīng)常有香客問我营勤,道長,這世上最難降的妖魔是什么壹罚? 我笑而不...
    開封第一講書人閱讀 60,199評論 1 300
  • 正文 為了忘掉前任葛作,我火速辦了婚禮,結(jié)果婚禮上渔嚷,老公的妹妹穿的比我還像新娘进鸠。我一直安慰自己,他們只是感情好形病,可當(dāng)我...
    茶點故事閱讀 69,196評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著霞幅,像睡著了一般漠吻。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上司恳,一...
    開封第一講書人閱讀 52,793評論 1 314
  • 那天途乃,我揣著相機(jī)與錄音,去河邊找鬼扔傅。 笑死耍共,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的猎塞。 我是一名探鬼主播试读,決...
    沈念sama閱讀 41,221評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼荠耽!你這毒婦竟也來了钩骇?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,174評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎倘屹,沒想到半個月后银亲,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,699評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡纽匙,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,770評論 3 343
  • 正文 我和宋清朗相戀三年务蝠,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片烛缔。...
    茶點故事閱讀 40,918評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡请梢,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出力穗,到底是詐尸還是另有隱情毅弧,我是刑警寧澤,帶...
    沈念sama閱讀 36,573評論 5 351
  • 正文 年R本政府宣布当窗,位于F島的核電站够坐,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏崖面。R本人自食惡果不足惜元咙,卻給世界環(huán)境...
    茶點故事閱讀 42,255評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望巫员。 院中可真熱鬧庶香,春花似錦、人聲如沸简识。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,749評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽七扰。三九已至奢赂,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間颈走,已是汗流浹背膳灶。 一陣腳步聲響...
    開封第一講書人閱讀 33,862評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留立由,地道東北人轧钓。 一個月前我還...
    沈念sama閱讀 49,364評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像锐膜,于是被迫代替她去往敵國和親毕箍。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,926評論 2 361

推薦閱讀更多精彩內(nèi)容