我可以将我的选择（主题开关）保存在HTML中吗？

我想用HTML和JavaScript做一个基本的主题切换代码。但是，如果我回来或刷新，选择被取消，页面恢复正常。我可以将我的选择（主题开关）保存在HTML中吗？

我可以在JavaScript中添加任何函数，以便选择保持到缓存清理或类似的东西吗？

var x = 0; 
 
var themeValue = 0; 
 

 
function changeTheme3() { 
 
    themeValue ++; 
 
    if (themeValue > 2) { 
 
     themeValue = 1; 
 
    } 
 
    if (themeValue == 1) { 
 
     document.body.style.backgroundColor = "grey"; 
 
    } else if (themeValue == 2) { 
 
     document.body.style.backgroundColor = "white"; 
 
    } 
 
}

button { 
 
    display: block; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    width: 250px; 
 
    height: 70px; 
 
    border: 2px solid #1ECD97; 
 
    border-radius: 40px; 
 
    background: transparent; 
 
    color: #1ECD97; 
 
    letter-spacing: 1px; 
 
    font-size: 18px; 
 
    font-family: 'Montserrat', sans-serif; 
 
} 
 

 
button:hover { 
 
    background-color: #1ECD97; 
 
    color: #fff; 
 
}

<div id="theme-button"> 
 
     <button type="button" onclick="changeTheme3()">Change Theme</button> 
 
    </div>

来源

2016-09-23 user3382310

一想到twerking代码......我会在一分钟... – evolutionxbox

使用html5 localstorage或cookie，然后在加载时，您可以通过if语句检查保存的模板是否存在cookie /本地存储，如果是，则加载该模板，否则加载默认值 – StackOverMySoul

您需要使用cookie。 'document.cookie' – evolutionxbox

我建议利用的localStorage的。如果你希望用户能够定制他们的体验，你需要在某个地方保存。这通常是通过会话或数据库完成的，但这两者都是后端解决方案。

对于前端，您可以选择设置cookie或使用localstorage。如果你想在主题的选择被限制为单个会话，你也可以使用sessionStorage

为了实现

function changeTheme3() { 
    themeValue ++; 
    if (themeValue > 2) { 
     themeValue = 1; 
     localStorage.setItem('themeValue', themeValue); 
    } 
    if (themeValue == 1) { 
     document.body.style.backgroundColor = "grey"; 
    } else if (themeValue == 2) { 
     document.body.style.backgroundColor = "white"; 
    } 
}

然后，地方，当你加载一个页面，你需要拉从存储这个值。（请注意，localStorage将值保存为字符串，因此您可能需要在检索时输入parseInt()）。

function loadTheme(){ 
    if (localStorage && localStorage.getItem('themeValue'){ 
     var storedTheme = parseInt(localStorage.getItem('themeValue')); 
     //do your logic to set the theme based on value 
    } else { 
     //do nothing or choose to set your default theme as the value into storage 
    } 
}

一个侧面说明，这取决于你的浏览器都支持，你可能想确保你检查，看看是否支持localStorage的。它对任何现代浏览器都有很好的支持。

来源

2016-09-23 15:09:18 EnigmaRM

-1

你可以做，使用SQLite HTML5例如检查此链接http://www.html5rocks.com/en/tutorials/webdatabase/todo/：d

这里简单的例子先生

<!DOCTYPE HTML> 
<html> 

    <head> 

     <script type="text/javascript"> 

     var db = openDatabase('db', '1.0', 'theme selector', 1000); //db name, version, desc, size in byte 
     var msg; 

     db.transaction(function (tx) { 
      tx.executeSql('CREATE TABLE IF NOT EXISTS THEME (id unique, theme)'); 
     }); 

     db.transaction(function (tx) { 
      tx.executeSql('SELECT * FROM THEME WHERE id = 1', [], function (tx, results) { 
       var len = results.rows.length, i; 
       var value = 'theme_1'; 
       if(len == 0){ 
        tx.executeSql('INSERT INTO THEME (id, theme) VALUES (1, ?)', [value]); 
       }else{ 
        value = results.rows.item(0).theme; 
       } 
       document.querySelector('#theme_selected').innerHTML = value; 
       document.getElementById('theme_select').value = value; 
      }, null); 
     }); 
     function update(){ 
      var selector = document.getElementById('theme_select'); 
      var value = selector[selector.selectedIndex].value; 
      db.transaction(function (tx) { 
       tx.executeSql('UPDATE THEME SET theme = ? WHERE id=1', [value]); 
       document.querySelector('#theme_selected').innerHTML = value; 
      }); 
     } 

     </script> 

    </head> 

    <body> 
     <select id="theme_select"> 
      <option value="theme_1" >theme 1</option> 
      <option value="theme_2">theme 2</option> 
     </select> 
     <button onclick="update()">update</button> 

     <div id="theme_selected"></div> 
    </body> 

</html>

来源

2016-09-23 15:10:28

虽然这可能在理论上回答这个问题，[这将是可取的]（http://meta.stackoverflow.com/q/8259）在这里包括答案的基本部分，并提供参考。 –

我可以将我的选择（主题开关）保存在HTML中吗？

回答

相关问题