MutationObserverとcookieについて

Question

mutation observerとcookieの併用について

ある動作でcookieが有効となった後、MutationObserver(以下MO)で特定の対象に変化があった場合のみ、そのcookieが解除されるという動作をしたいのですが、うまくいきません。

発生している問題

cookieが有効になったあと、監視要素に変更がない状態で一度再読み込みしたらcookieの有効がちゃんと保持されているのですが、なぜか二度続けてブラウザを再読み込みすると監視下の要素に変化がないにも関わらずcookieが解除されてしまいます。

試したこと

cookieにpath:'/'を記載。監視下要素も解除前、解除後で変化が見当たりません。

Comments

[x_x]

該当箇所のスクリプトと、監視対象をどう変化させているのかを書いてください。

[yambejp]

> ある動作でcookieが有効となった
>そのcookieが解除される

cookieは有効にしたり解除したりするものではないと思いますが・・・
参照・設定・削除するということですか？
なにをどうしたいかわかりません

Answer 1

一応sample

<style>
.red{color:red}
</style>
<script>
function setCookie(key,val){
    tmp = key+"="+escape(val)+";";
    tmp += "expires=Fri, 31-Dec-2030 23:59:59;";
    document.cookie = tmp;
};
function getCookie(key){
  var params  = document.cookie.split(/; */);
  var ret=null;
  for(var i=0;i<params.length;i++){
    if(r=params[i].match(new RegExp("^"+key+"="+"(.*)"))){
      ret=r[1];
    }
  }
  return ret;
};

function delCookie(key){
    expiredate = new Date();
    expiredate.setYear(expiredate.getYear()-1);
    tmp = key+"=;";
    tmp += "expires="+expiredate.toGMTString();
    document.cookie = tmp;
};
window.addEventListener('DOMContentLoaded',function(){
  var t=document.querySelector('#hoge');
  document.querySelector('#set').addEventListener('click',function(e){
    setCookie('red',1);
  });
  document.querySelector('#check').addEventListener('click',function(e){
    console.log(getCookie('red'));
  });
  document.querySelector('#change').addEventListener('click',function(e){
    document.querySelector('#hoge').classList.add('red');
  });
  var mo = new MutationObserver(function(r){
    delCookie("red");
  });
  const opt = {
  attributes: true,
  attributeFilter:['class'],
  };
  mo.observe(t, opt);
});
</script>
<div id="hoge">hoge</div>
<input type="button" id="set" value="set">
<input type="button" id="check" value="check">
<input type="button" id="change" value="change">

手順

• checkボタンを押すとredというcookieに値がないのでnullが返る
• setボタンを押すとcookie:redに1が入る
• checkボタンを押すと1が返る
• 一度ページをリロードしてもcheckを押すと1が返る

※ここまでcookieの基本

• changeボタンを押すと#hogeにclass=redが追加される
• そこでmoが発動し、cookie:redを削除
• setをおしてもnullが返る