59551


ボタンをクリックすることで、styleSheetを変更し、テーマカラー(背景色)を変えるように設定しました。

ここまでの設定はできたのですが、  
localStorageを使って、変更したテーマカラー保存した状態にしたいのですが、  
localStorageをどのように設定したらよいのかがわかりません。。

localStorageを使用するのが初めてで、  
保存するときは、`localStorage.setItem('Key', '保存する値');`などの情報があるのですが、  
これをどう扱っていけばよいのかがわかりません。。

情報に不足部分があるかもしれませんが、ご教授いただけますと大変助かります。

[code]

    //テーマカラーの切り替え
    function setHref($href) {
      var $elementReference = document.getElementById("s_theme");
      $elementReference.href = $href;
    }
[/code]

[code]

     <link rel="stylesheet" href="normalmode.css" id="s_theme">
      
      <ul>
        <li>
          <button onclick="setHref('normalmode.css');" class="normalmode"></button>
        </li>
        <li>
          <button onclick="setHref('darkmode.css');" class="darkmode"></button>
        </li>
        <li>
          <button onclick="setHref('lightmode.css');" class="lightmode"></button>
        </li>
      </ul>
[/code]


CC BY-SA 4.0
2019-10-08T01:00:58.623
59547
2019-10-08T02:45:14.347
2019-10-08T01:07:54.007
35901
35901
question
javascript jquery
localstorageを使って、テーマカラーを取得しテーマカラーを保存しておく方法


setHrefでlocalStorageに保存。

[code]

      function setHref($href) {
        var $elementReference = document.getElementById("s_theme");
        $elementReference.href = $href;
        localStorage.setItem('key', $href); //ここで保存
      }
    
[/code]

bodyのonload時などでlocalStorageから読みだして下記のような関数でセットします。

[code]

    function getHref() {
      var $elementReference = document.getElementById("s_theme");
      $elementReference.href = localStorage.getItem('key');
    }
    
[/code]


CC BY-SA 4.0
2019-10-08T02:44:29.710
59550
2019-10-08T02:44:29.710
19858
59547
answer


`setHref()`内で `localStorage.setItem(固定のキー文字列,
$href)`して、ページロード時に`getItem(固定のキー文字列)`が`null`でない場合は`setHref()`を呼んでしまえばよいでしょう。

[code]

    <link rel="stylesheet" href="normalmode.css" id="s_theme">
    <script>
    function setHref($href) {
      var $elementReference = document.getElementById("s_theme");
      $elementReference.href = $href;
      localStorage.setItem('theme_style', $href);
    }
    
    // このコードは文書ロード時に実行される前提
    let style = localStorage.getItem('theme_style');
    if (style !== null) {
      setHref(style);
    }
    </script>
    
[/code]


CC BY-SA 4.0
2019-10-08T02:45:14.347
59551
2019-10-08T02:45:14.347
3475
59547
answer