セレクション（テーマスイッチ）を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

はこちら

...私は分になるでしょう... – evolutionxbox

html5 localstorageまたはcookieを使用すると、if文を使用してクッキー/ローカルストレージがテンプレートが保存されているかどうかを調べることができます。そうであればロードしてください。そうでない場合はデフォルトのロード – StackOverMySoul

クッキーを使用します。 'document.cookie' – evolutionxbox

私はのlocalStorageを利用することをお勧めしたいです。ユーザーが自分の経験をカスタマイズできるようにするには、その場所をどこかに保存する必要があります。これは通常、セッションまたはデータベースを介して行われますが、どちらもバックエンドソリューションです。

フロントエンドの場合は、Cookieを設定するか、localstorageを使用するオプションがあります。あなたがテーマの選択は、単一のセッションに限定したい場合は、ページをロードする際にどこか、あなたはストレージからこの値を引く必要があり、その後

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"; 
    } 
}

実装

について sessionStorage

を使用することができます。（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単純な例の先生だけでtwerkingコードを想像

<!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に保存できますか？

答えて

関連する問題