Javascript 我可以用HTML保存我的选择（主题切换）吗？_Javascript_Html

Javascript 我可以用HTML保存我的选择（主题切换）吗？

javascript html

Javascript 我可以用HTML保存我的选择（主题切换）吗？,javascript,html,Javascript,Html,我正在尝试使用HTML和JavaScript制作一个基本的主题切换代码。但如果我回击或刷新，选择将被取消，页面将恢复正常我可以在JavaScript中添加任何函数，使选择保持到缓存清理或类似的情况吗 var x=0； var themeValue=0；功能更改主题3{ themeValue++；如果评估值>2{ themeValue=1； } 如果themeValue==1{ document.body.style.backgroundColor=灰色； }如果themeValue==2

我正在尝试使用HTML和JavaScript制作一个基本的主题切换代码。但如果我回击或刷新，选择将被取消，页面将恢复正常

我可以在JavaScript中添加任何函数，使选择保持到缓存清理或类似的情况吗

var x=0； var themeValue=0；功能更改主题3{ themeValue++；如果评估值>2{ themeValue=1； } 如果themeValue==1{ document.body.style.backgroundColor=灰色； }如果themeValue==2，则为else{ document.body.style.backgroundColor=白色； } } 钮扣{ 显示：块；保证金：0自动；填充：0；宽度：250px；高度：70像素；边框：2px实心1ECD97；边界半径：40px；背景：透明；颜色：1ECD97；字母间距：1px；字号：18px；字体系列：“蒙特塞拉特”，无衬线； } 按钮：悬停{ 背景色：1ECD97；颜色：fff； } 改变主题

我建议使用本地存储。如果您希望用户能够自定义他们的体验，您需要将其保存在某个地方。这通常是通过会话或数据库完成的，但是这两个都是后端解决方案

对于前端，您可以选择设置cookie或使用。如果希望主题选择仅限于单个会话，也可以使用

实施

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将值保存为字符串，因此您可能希望在检索时解析您的值

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。它对任何现代浏览器都有很好的支持。

您可以使用sqlite html5来实现这一点，例如，检查以下链接：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>

只是想象一下twerking代码。。。我等一下…使用html5 localstorage或cookie，然后在加载时，您可以使用if语句检查是否存在保存了模板的cookie/本地存储，如果存在，则加载该存储，否则加载默认值您将要使用cookie。document.cookie虽然这可以从理论上回答问题，但在此处包含答案的基本部分，并提供链接供参考。