vue中刷新页面后保存当前选中样式

男娘i 2022-11-21 11:23 224阅读 0赞

#### 主要使用Window localStorage 属性 ####

localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。  
localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。

### [Window localStorage 属性][Window localStorage] ###

###### 导航栏样式 ######

![导航栏][2020110120460280.png_pic_center]

###### 刷新页面后可保存当前选中的样式 ######

![导航栏][20201101204846604.png_pic_center]

###### HTML标签 ######

<template>
    	<div class="nav">
    	    <div v-for="item in nav"
    	         :class="item.index == 1 ? ' selectedBgm' : '' "
    	         @click="handler(item)"
    	         :index="item.index"
    	         :id="'nav' + item.index">
    	        <span calss="nav_text">{ {  item.title }}</span>
    	        <p class="line"><img src="../../public/images/line.png"/></p>
    	    </div>
    	</div>
    </template>

##### script代码 #####

data(){ 
        return{ 
            nav:[
        { 
            title:"水功能区",
            index:"1",
            path:"",
        }, { 
            title:"饮用水源地",
            index:"2",
            path:"",
        },{ 
            title:"水质断面",
            index:"3",
            path:"",
        },{ 
            title:"水质较好湖泊",
            index:"4",
            path:"",
        },{ 
            title:"污染源",
            index:"5",
            path:"",
        },{ 
            title:"项目管理调度",
            index:"6",
            path:"",
        },{ 
            title:"预警模块",
            index:"7",
            path:"",
        },{ 
            title:"政策评估模块",
            index:"8",
            path:"",
        },
    ],
            activeIndex:'',
            openeds:null,
            pageName:null,
            currentUser:null, 
        }
    },
    created(){ 
        this.openeds = localStorage.getItem('pageIndex');
        this.pageName = localStorage.getItem('pageName'); 
    },
    mounted() { 
        if(this.openeds){ 
            let navId = "#nav" + this.openeds;
            $(navId).addClass("selectedBgm").siblings().removeClass("selectedBgm");
        }
    },
    methods: { 
        handler(item) { 
            this.pageName = item.title
            localStorage.setItem('pageIndex',item.index)
            localStorage.setItem('pageName',item.title) 
    
            this.openeds = localStorage.getItem('pageIndex');
            if(item.index == this.openeds){ 
                let navId = "#nav" + this.openeds;
                $(navId).addClass("selectedBgm").siblings().removeClass("selectedBgm");
            }
        },
    },

###### style样式 ######

[Window localStorage]: https://www.runoob.com/jsref/prop-win-localstorage.html
[2020110120460280.png_pic_center]: /images/20221120/182f25776e80460aa33c49dbf4598b39.png
[20201101204846604.png_pic_center]: /images/20221120/ade27c604f1a4e64ac8e423f17c89c7e.png