与本地存储交换样式表 [英] Swap style sheet with localstorage

查看:70
本文介绍了与本地存储交换样式表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我是设计师,JS对我来说完全陌生.刷新后,我想保留所选样式表的本地存储.我能够找到交换样式表的代码,但是不确定使用localstorage添加什么代码

I'm a designer and JS is completely foreign to me. I'd like to keep localstorage of the selected stylesheet after refresh. I was able to find code to swap stylesheet, but I'm not sure what code to add to use localstorage

<!DOCTYPE html>
<html>
<head>
<link id="pagestyle" rel="stylesheet" type="text/css" href="style1.css">
<script>

function swapStyleSheet(sheet){
    document.getElementById('pagestyle').setAttribute('href', sheet);
}


</script>


</head>
<body>
<h2>Javascript Change StyleSheet Without Page Reload</h2>
<button onclick="swapStyleSheet('style1.css')">Dark Style Sheet</button>
<button onclick="swapStyleSheet('style2.css')">Blue Style Sheet</button>
<button onclick="swapStyleSheet('style3.css')">Default Style Sheet</button>
</body>
</html>

推荐答案

您可以使用此代码

<script>
    var swapStyleSheet = function (sheet) {
        document.getElementById('pagestyle').setAttribute('href', sheet);
        storebackground(sheet);
    }

    var storebackground = function (swapstylesheet) {
        localStorage.setItem("sheetKey", swapstylesheet); //you need to give a key and value
    }

    var loadbackground = function () {
        document.getElementById('pagestyle').setAttribute('href', localStorage.getItem('sheetKey'));
    }

    window.onload = loadbackground();
</script>

这篇关于与本地存储交换样式表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆