如何在不同页面上进行对CSS样式的更改

Question

所以我正在创建一个网站，有几个页面调用相同的CSS文件。我正在采用一种方法来改变网站的背景图像。我已经使用javascript函数在每个页面上进行本地工作：

function bgChange(bg) {
    document.body.style.background = bg;
}

在脚本部分定义，然后实现它：

<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('switchon','','images/switchonhl.jpg',1)" onclick="bgChange(this.style.backgroundImage)"
            style="background-image:url('images/woodbacklight.jpg')"><img src="images/switchon.jpg" width="50" height="50" id="switchon"></a>

但是，当您转到网站上的其他页面时，它将恢复为原始图像。有没有办法在不同的页面上保持设置？

谢谢！

Answer 1

我的第一个想法是localStorage，但localStorage可以直接在客户端上修改。如果这对您没问题，那么这是我的第一个推荐（因为根据我的经验，它很容易合作）。

在客户端上存储数据的一些可能方法：

1. 本地存储
2. 会话存储
3. 缓存

在服务器上存储数据的一些可能方法：

1. MySQL的
2. MongoDB的
3. Redis的

localStorage的示例用法（在每页上）

(function () {
    // default background image
    if (!localStorage['bg']) localStorage['bg'] = "/path/to/some/default_image.png";

    document.body.style.background = localStorage['bg'];
})();

然后设置变量：

function changeBg(bg) {
    localStorage['bg'] = bg;
};

Answer 2

首先编辑代码以将bg保存在localStorage（或cookies或sessionStorage）

  function bgChange(bg) {
        document.body.style.background = bg;
        localStorage.setItem('bgcolor', bg);
    }

并将其添加到您拥有的每个页面的页面加载中。

document.onload = function(){
    bg = localStorage.getItem('bg');
    document.body.style.background = bg;
};