什么是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
},
},
