原生JavaScript如何实现后台管理系统主题切换功能？

在项目中我们总会遇到，可以切换主题的项目，比如这样：

当用户选择主题切换，选定某一主题之后， 切换到相应主题的样式文件，而且在刷新页面的时候，样式依旧生效，而不是仅次于当前页面，那怎么实现这种功能呢？

 我们可以把用户点击之后的样式文件通过生命一个变量 将其存到本地，当页面刷新进入新页面之后，调用刚刚切换的样式文件，就可以实现这种效果（缺陷就是：会有短暂的留白，望 大神指教）

附上代码：

link css样式文件正常引入即可

html(部分)

                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown">
                        <span style="font-size: 18px" class="colour">主题切换</span>
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li>
                            <a th:onclick="'javascript:themeOne('+${1}+')'">护眼黄</a>
                            <a th:onclick="'javascript:themeOne('+${2}+')'">天空蓝</a>
                            <a th:onclick="'javascript:themeOne('+${3}+')'">素雅白</a>
                        </li>
                    </ul>
                </li>

js

<script>
    var stylePath
    var styleCss
    // var headLink
        function themeOne(n) {
            switch(n)
            {
                case 1:
                    let obj = document.getElementById('modifyCss')
                    // obj.setAttribute('href' , '/libs/theme/pblog/css/common01.css')
                    styleCss = '/libs/theme/pblog/css/common01.css'
                    obj.setAttribute('href' , styleCss)
                    localStorage.setItem("stylePaths",styleCss)
                    console.log(localStorage.getItem('stylePaths'))
                    // stylePath = localStorage.getItem('stylePaths')
                    break
                case 2:
                    let obj1 = document.getElementById('modifyCss')
                    // obj1.setAttribute('href' , '/libs/theme/pblog/css/common02.css')
                    styleCss = '/libs/theme/pblog/css/common02.css'
                    obj1.setAttribute('href' , styleCss)
                    localStorage.setItem("stylePaths",styleCss)
                    console.log(localStorage.getItem('stylePaths'))
                    // stylePath = localStorage.getItem('stylePaths')
                    break
                case 3:
                    let obj2 = document.getElementById('modifyCss')
                    // obj2.setAttribute('href' , '/libs/theme/pblog/css/web-common.css')
                    styleCss = '/libs/theme/pblog/css/web-common.css'
                    obj2.setAttribute('href' , styleCss)
                    localStorage.setItem("stylePaths",styleCss)
                    console.log(localStorage.getItem('stylePaths'))
                    // stylePath = localStorage.getItem('stylePaths')
                    break
                default:
                    alert('没有该选项')
            }
        }
    function re() {
        var headLink = document.createElement("link")
        headLink.setAttribute("rel" , "stylesheet")
        headLink.setAttribute("id" , "modifyCss")
        headLink.setAttribute("href" , stylePath)
        var bodyPage = document.getElementById("pageId")
        bodyPage.appendChild(headLink)
    };
    re()

    function fun() {
        stylePath = localStorage.getItem('stylePaths')
        if(stylePath == null) {
            stylePath = '/libs/theme/pblog/css/web-common.css'
        }
        let pageCss = document.getElementById('modifyCss')
        pageCss.setAttribute('href' , stylePath)
        console.log(stylePath)
    }
    fun()
</script>

当然 这块函数 你可以写成 自调用函数，

如有问题 ：欢迎私信 指正！