JavaScriptのtoggleで追加・削除したクラスの状態をCookieに保存したい

ボタンをクリックする度にbodyにクラスを追加・削除する仕組みを
JavaScriptで作成しております。

コードは以下の通りです。

<body>
<div id="links">ボタン</div>  
</body>

<script>
var links = document.querySelector('#links');
var bd = document.querySelector('body');

var tgOn = function(el) {
  el.classList.toggle('tgclass');
}

links.addEventListener('click', function() {
  tgOn(bd);
}, false);
</script>

ボタンクリックでbodyにクラスを追加・削除することはできるようになったのですが、
bodyに追加されたクラスの状態をCookieに保存して、
次回ページを開いた時もクラスが追加されている(もしくは追加されていない)状態を
維持したいと考えています。

toggleの状態をCookieに保存することはできるでしょうか？
やり方が全然思いつかず、質問させていただきました。

アドバイスいただけると幸いです。
どうぞよろしくお願いいたします。

行動規範の内容に同意します

回答2件

toggleの状態をCookieに保存することはできるでしょうか？

できます。

やり方が全然思いつかず

状態の変化時に、状態を記録する
ページを開いた時に保存された「状態」が有るか確認し、あったらその「状態」にする

Cookieでないといけないのでなければ localStorage のほうがお勧めです。

【Window.localStorage - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage

【localStorageで複数のデータを保存する｜ Tips Note by TAM】
https://www.tam-tam.co.jp/tipsnote/javascript/post5978.html

投稿2019/03/17 12:52

kei344

総合スコア69407

tetutetutetu

2019/03/18 08:04

ご回答ありがとうございます。localStorageの方がいいんですね。勉強します！

行動規範の内容に同意します

ベストアンサー

ライブラリをつかわずにクッキーの書き換えをするのには
get,set,del用の関数を自前で用意することです

html
1<style>
2body.tgclass{background-Color:yellow;}
3</style>
4<script>
5window.addEventListener('DOMContentLoaded', function(e){
6  var bd=document.querySelector('body');
7  if(ck=getCookie('bodycookie')) bd.classList.add(ck);
8  document.querySelector('#links').addEventListener('click',function(e){
9    bd.classList.toggle('tgclass');
10    if(bd.classList.contains('tgclass')){
11      setCookie('bodycookie','tgclass');
12    }else{
13      delCookie('bodycookie');
14    }
15  });
16});
17function setCookie(key,val,url){
18  tmp = key+"="+escape(val)+";";
19  tmp += "expires=Fri, 31-Dec-2030 23:59:59;";
20  if(url){
21    tmp += "domain="+getDomain(url)+";";
22    tmp += "path="+getDomainPath(url)+";";
23  }
24  document.cookie = tmp;
25}
26function getCookie(key){
27  var params  = document.cookie.split(/; */);
28  var ret=null;
29  for(var i=0;i<params.length;i++){
30    if(r=params[i].match(new RegExp("^"+key+"="+"(.*)"))){
31      ret=r[1];
32    }
33  }
34  return ret;
35}
36function delCookie(key){
37  expiredate = new Date();
38  expiredate.setYear(expiredate.getYear()-1);
39  tmp = key+"=;";
40  tmp += "expires="+expiredate.toGMTString();
41  document.cookie = tmp;
42}
43</script>
44<body>
45<div id="links">ボタン</div>  
46</body>