从LocalStorage存储并检索主题选择

Question

我创建了一个测试网页，可以使用onclick="document.body.className"按钮选择三个不同的主题。这些工作是预期的，但选择并不能在刷新上保存。

我想从LocalStorage中存储和检索用户的选择。当我接近80年时，我年纪太大了，无法开始学习JavaScript，因此非常感谢您对工作脚本的帮助。

如果可能的话，我将将此功能应用于我所有俱乐部的网页。测试页面为：http：//12phillipstreet.com/alternative-themes.html

Answer 1

当然。

<div class="button-new"><label for="theme">Themes:</label>
    <button class="white" type="submit">.</button>
    <button class="khaki" type="submit">.</button>
    <button class="black" type="submit">.</button>
</div>

javascript

var body = document.body || document.getElementsByTagName("body")[0];
function retrieveClass(){
    var getClass = localStorage.getItem("changeThemeClass") || "tw";
    body.className=getClass;
}
function changeTheme(elem, cls){
    document.getElementsByClassName(elem)[0].onclick=function(){
        body.className=cls;
        localStorage.setItem("changeThemeClass", cls);
    };
}
retrieveClass();
changeTheme("white", "tw");
changeTheme("khaki", "tk");
changeTheme("black", "tb");