Javascript 使用本地存储更改div背景色

我一直试图让我的页面收集输入的颜色并保存到本地存储。然后，我希望一个div的背景设置为该颜色。然后，该颜色必须用于站点每页上的div（主要内容div位于每页上，并且具有相同的ID）

这就是我目前所拥有的

Jquery：

    if (typeof (localStorage) == 'undefined') {
    document.getElementById("result").innerHTML = 
'Your browser does not support HTML5 localStorage. Try upgrading.';
} else {
    if (localStorage.getItem("background") !== null) {
        getColour = localStorage.background;
        $("#content").addClass(getColour);
    }
}
console.log(localStorage);


$(document).ready(function () {
    getColour = localStorage.background;
    $('.palette').click(function () {
        getColour = localStorage.background;
        $("#content").removeClass(getColour);
        localStorage.removeItem('background');
        var setColour = $(this).attr("id");
        $("#content").addClass(setColour);
        localStorage.setItem("background", setColour);
    });
});

HTML

我是一个非常新的网站创建和这个网站是一个统一的任务。我试图在网站中实现可访问性选项，以改变div的背景颜色，使阅读更容易。 我已经让它的工作，因为存储到本地存储的数据，它改变了我的页面上的颜色面纱，但重置时，我改变了页面。我在每个页面上运行相同的脚本，并且在本地运行该站点，而不是在web上运行

这方面的任何帮助都会很好

干杯

眨眼移动

    if (typeof (localStorage) == 'undefined') {
    document.getElementById("result").innerHTML = 
'Your browser does not support HTML5 localStorage. Try upgrading.';
} else {
    if (localStorage.getItem("background") !== null) {
        getColour = localStorage.background;
        $("#content").addClass(getColour);
    }
}

---

进入文档。准备好了。现在你正试图在一个尚未呈现的元素上设置一个类。

上面的几点：……在Chromean中似乎对我有效，在Chromean中也对我有效，你知道为什么它不适用于我的站点吗？看看JSFIDLE，它使用的是onLoad和版本2.1。我已经升级到2.1，但我没有“onLoad”在我的代码中的任何地方，这就是问题所在吗？了不起的朋友，这很有效，非常感谢。

#content{
    text-align:justify;
    position:relative;
    margin:45px auto 0px auto;
    width:85%;
    height:100%;
    border-radius:25px;
    padding: 10px 10px 10px 10px;
    z-index:1;
    border:1px solid black;
}
.palette {
    cursor: pointer;
    height: 18px;
    width: 18px;
    border: 2px solid #000
}

.colorPicker1 {
    background: /*#e1ffff;*/none;
}
#colorPicker1 {
    position:fixed;
    top:15px;
    left:15px;
}
.colorPicker2 {
    background: #ffffb8;
}
#colorPicker2 {
    position:fixed;
    top:15px;
    left:40px;
}

.colorPicker3 {
    background: #ffc5ff;
}
#colorPicker3 {
    position:fixed;
    top:15px;
    left:60px;
}

.colorPicker4 {
    background-color: #99ff9c;
}
#colorPicker4 {
    position:fixed;
    top:15px;
    left:90px;
}

.colorPicker5 {
    background: #97acff;
}
#colorPicker5 {
    position:fixed;
    top:15px;
    left:125px;
}

#colours {
    position:relative;
    height:30px;
    width:100%;
    border:1px solid red;
}

    if (typeof (localStorage) == 'undefined') {
    document.getElementById("result").innerHTML = 
'Your browser does not support HTML5 localStorage. Try upgrading.';
} else {
    if (localStorage.getItem("background") !== null) {
        getColour = localStorage.background;
        $("#content").addClass(getColour);
    }
}