Могу ли я сохранить свой выбор (Theme switch) в HTML?

Я пытаюсь сделать основной код переключения темы с помощью HTML и JavaScript. Но если я ударил или обновил, выбор отменен, и страница вернется в нормальное состояние.Могу ли я сохранить свой выбор (Theme switch) в 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

Просто воображая код тверкинг ... Я буду через минуту ... – 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) включить сюда основные части ответа и предоставить ссылку для Справка. –

Могу ли я сохранить свой выбор (Theme switch) в HTML?

ответ

Смежные вопросы