web-dev-qa-db-ja.com

Wordpress用のシンプルなCookieボックスを作成する

私は単純なクッキーボックス通知を作成しようとしていますが、実際にはこの特定の idea を使用したいと思います

問題は、フッターでこのjsを実行すると、「yes」または「no」をクリックするだけで、ページを更新した後iクッキーボックスの最初からもう一度を参照してください。たとえば、10日などの非常に単純な有効期限を設定し、それ以上は設定せず、クリックしたときに答えに応じて機能するようにします。

私は本当にjsが苦手なので、誰かが私を助けてくれたら、ありがたいです。 :)

!(function() {
var e = function(e, t, o) {
(this.text = e),
  (this.acceptText = t),
  (this.denyText = o),
  (this.element = null),
  this.init();
};
(e.prototype = {
init: function() {
  this.create(), this.load(), this.actions();
},
load: function() {
  null === localStorage.getItem("cookie-box-accepted") && this._show();
},
actions: function() {
  var e = document.querySelector("#cookie-box-accept"),
    t = document.querySelector("#cookie-box-deny"),
    o = this;
  e.addEventListener(
    "click",
    function(e) {
      e.preventDefault(),
        localStorage.setItem("cookie-box-accept", "yes"),
        o._hide();
    },
    !1
  ),
    t.addEventListener(
      "click",
      function(e) {
        e.preventDefault(),
          localStorage.setItem("cookie-box-deny", "no"),
          o._hide();
      },
      !1
    );
},
create: function() {
  var e = document.createElement("div");
  this.element = e;
  var t =
    "<div id='cookie-box-wrap'><div id='cookie-box-text'>" +
    this.text +
    "</div>";
  (e.id = "cookie-box"),
    (t +=
      "<div id='cookie-box-btns'><button type='button' id='cookie-box-accept'>" +
      this.acceptText +
      "</button>"),
    (t +=
      "<button onclick=deleteAllCookies() type='button' id='cookie-box-deny'>" +
      this.denyText +
      "</button></div>"),
    (t += "</div>"),
    (e.innerHTML = t),
    document.body.appendChild(e);
},
_show: function() {
  var e = this;
  (e.element.style.display = "block"),
    setTimeout(function() {
      e.element.className = "visible";
    }, 500);
},
_hide: function() {
  var e = this;
  (e.element.className = ""),
    setTimeout(function() {
      e.element.style.display = "none";
    }, 500);
}
  }),
document.addEventListener("DOMContentLoaded", function() {
  new e(
    "This website uses &laquo;cookies&raquo; to give you the best experience when you visit. You can manage or block them <a href='https://www.aboutcookies.org/how-to-control-cookies/' target='_blank'>in your browser settings</a>. <span id='open'><svg height='100' width='35'><text x='0' y='0' fill='#c9770c' transform='rotate(90 1,10)'>Cookies</text>Your browser does not support inline SVG.</svg></span> Do you accept cookies?",
    "Yes",
    "No"
  );
});
})();
var sheet = (function() {
var e = document.createElement("style");
return (
e.appendChild(
  document.createTextNode(
    "#cookie-box{position:fixed;bottom:1px;left:1px;width:99%;max-width:290px;min-height:3em;background:#f1f1f1;border:dotted 1px #555;color:#555;z-index:10000000000;display:none;transition:all .5s ease-in;transform:scaleY(0)}#cookie-box.visible{transform:scaleY(1)}#cookie-box{margin-left:-293px}#cookie-box:hover{margin-left:1px}#cookie-box-wrap{margin:0 auto;max-width:285px;text-align:center}#cookie-box-text{padding:17px 3px 7px;font-family:Arial;font-size:13px;line-height:17px;margin-bottom:5px}#cookie-box-text a{color:#c9770c;text-decoration:underline;text-decoration-style:dotted}#cookie-box-btns{margin:15px auto}#cookie-box-btns button{border-radius:1px;border:none;padding:7px 33px;font-size:13px!important;line-height:17px;font-family:Arial;color:#fff;text-transform:uppercase;cursor:pointer;margin-right:7px;transition:all .5s ease-in}#cookie-box-btns button:hover{background-color:grey}button#cookie-box-accept{background:olivedrab}button#cookie-box-deny{background:#c9770c;}#open{ float:right;margin-top:-25px;margin-right:-40px;color:black;font-size:23px;cursor:all-scroll;background:#f1f1f1;border:dotted 1px #555;border-left:none}"
  )
),
document.head.appendChild(e),
e.sheet
);
})();
function deleteAllCookies() {
(document.cookie = "=; expires=Fri, 31 Dec 2000 23:59:59 UTC; path=/"),
alert(
  "I am cookie with an expiry date 31 Dec 2000 23:59:59. I don't live after: " +
    document.cookie
);
}

編集------------------------------------

私が試したコードのアイデア

load: function() {
null === checkCookie("cookie-box-accept") && this._show();
},
actions: function() {
var e = document.querySelector("#cookie-box-accept"),
t = document.querySelector("#cookie-box-deny"),
o = this;
e.addEventListener(
"click",
  function(e) {
  e.preventDefault(),
    setcookie("cookie-box-accept", 'visited',time()+60*60*24*31, "yes"),
    o._hide();
 },
 !1
  ),
  t.addEventListener(
   "click",
   function(e) {
    e.preventDefault(),
       unsetcookie("cookie-box-deny", "no"),
       o._hide();
   },
   !1
 );
},

残念ながら動作しません:(

customizationjavascriptcookiesnotifications
1
Honoluluman

これは単なるタイプミスです。

ただし、明確にするために、このコードではユーザーの選択を保存するためにCookieを使用していませんが、 localStorage は異なるものですが、ここで使用できます。

動作する特定のコードをテストした後、次の2つの方法を見てください。

load: function() {
  null === localStorage.getItem("cookie-box-accepted") && this._show();
},
actions: function() {
  var e = document.querySelector("#cookie-box-accept"),
    t = document.querySelector("#cookie-box-deny"),
    o = this;
  e.addEventListener(
    "click",
    function(e) {
      e.preventDefault(),
        localStorage.setItem("cookie-box-accept", "yes"),
        o._hide();
    },
    !1
  ),
    t.addEventListener(
      "click",
      function(e) {
        e.preventDefault(),
          localStorage.setItem("cookie-box-deny", "no"),
          o._hide();
      },
      !1
    );
},

loadメソッドは、cookieの選択がlocalStorageに保存されているかどうかをテストし、保存されていない場合はcookieブロックを表示します。そして、actionsメソッドは、選択肢ボタンにリスナーを追加して、localStorageに保存する選択肢の値を作成します。

値はキー>値として作成され、コードの問題は、loadメソッドが探している値の名前が作成されたものと同じではないことですactionsメソッドによる：

loadメソッドは、「cookie-box-accepted」という名前のキーに対応する値を探します。ここで、actionsメソッドはそれを保存します「cookie-box-accept」という名前のキー

したがって、キー名を変更すると、loadメソッドはactionsメソッドが作成するものと同じものを探しますが、意図されました。

他の質問に答える編集----------------------------------- -

わかりましたので、localStorageについて説明したリンクを確認してください。説明と簡潔さが非常によくわかります。

今すぐ質問に答えるには：

1-localStorageは有効期限の概念に基づいて構築されていないため（Cookieとは異なり）、自動的に削除されないため、実装する必要があります。コード内で、保存されたデータの経過時間をテストし、古くなったデータを削除する方法。この回答を参照してください： https://stackoverflow.com/questions/2326943/when-do-items-in-html5-local-storage-expire

2-（localStorageについて）リンクで説明したように、webStorageには2つの「タイプ」があります。

HTML Webストレージは、クライアントにデータを保存するための2つのオブジェクトを提供します。

window.localStorage-有効期限のないデータを保存しますwindow.sessionStorage-1つのセッションのデータを保存します（ブラウザのタブを閉じるとデータは失われます）

したがって、localStorageの代わりにsessionStorageを使用できますが、ユーザーはブラウザを終了または再起動した後、Webサイトに戻るたびに設定を再選択する必要があります。

開発者コンソールを使用して、ブラウザからlocalStorageデータを手動で削除できることに注意してください。

  • chrome/Firefoxで「F12」をクリックします
  • 開発者ツールバーを表示します（これは便利なツールが豊富です）
  • 左の列の[アプリケーション]タブに移動すると、[ストレージ]セクションが表示され、次に[ローカルストレージ]が表示されます。

ここでは、ドメインによって保存されたlocalStorageデータを見ることができ（localStorageデータはCookieのようにドメインにリンクされています）、一部を削除できます。しかし、それは手動で行わなければならないので、一般的なユーザーはもちろんそれをしないので、開発セッション/デバッグセッション（以前の方法でコードに実装するより良い方法）にそれを予約しますとにかく）。

3-私自身の意見では、localStorageはすばらしいメカニズムです。有効期限の概念に基づいて構築されているため、作成時に設定するだけで、有効期限が切れるとブラウザによって自動的に削除されます（または、ユーザーが手動でCookieを削除するとすぐに削除されます）。

1
Dexter0015