localStorage.setItem()使用 && 切换主题的方法

什么是localStorage

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

localStorage的优势

1、localStorage拓展了cookie的4K限制

2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

3、localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空

localStorage的使用

localStorage.getItem(key):获取指定key本地存储的值
localStorage.setItem(key,value)：将value存储到key字段

在实际开发中，当我们退出系统的时候要清除系统中所有的缓存

<el-menu-item index="5-3" @click="exit">退出系统</el-menu-item>

 // 退出系统
    exit(){
      // 清除所有的缓存
      localStorage.clear()
      sessionStorage.clear()
      this.$router.push('/')
    }

切换主题安装Element Plus组件库

安装

npm install element-plus --save

在main.js中导入

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

在开发当中会有一个切换主题的应用，怎么做呢？
首先在store文件夹中新建一个module文件夹，在建一个theme.js文件
namespaced:true是为了解决不同模块命名冲突的问题

export default {
    // 为了解决不同模块命名冲突的问题，将不同模块的namespaced:true
    namespaced:true,
    state: {
        // 当前使用的主题索引
        themeActive:0,
        // 主题数据
        themes:[
            {
                name:'蓝色主题',
                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)
        }
    },
  }

标签里面的样式

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

在导航栏里面的菜单引入

:background-color="sun"

切换主题的方法

 methods: {
    changeTheme(index){
      // 获取/切换 对应的主题   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
    },
    // 返回当前主题颜色
    sun(){
      return this.$store.state.theme.themes[this.$store.state.theme.themeActive].value
    },
  },