Create simple Cookie Box for WordPress

Question

I get it this is just a typo.

But just to be clear, this code doesn’t use cookie to store the user choice, but localStorage, which is something different but can be used to do so here.

So after testing the given code it work, look at this 2 metbhods:

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
    );
},

The load method is responsible of testing if the cookie choice is stored in the localStorage and if not, display the cookie block.
And the actions method add listeners on choices buttons to create the value of the choice to store in the localStorage.

The value is created as a key > value, and the problem in your code is that the name of the value the load method is looking for isn’t the same as the one created by the actions method :

The load method is looking for a value corresponding to a key named “cookie-box-accepted” where the actions method store it on a key named “cookie-box-accept”

So if you change the key name the load method is looking for for the same as the actions method creates, it will work as intended.

EDIT TO ANSWER YOUR OTHER QUESTIONS ————————————

Ok, so go check the link I gave you about localStorage, it’s really well explain and concise.

To answer your questions now:

1 – The localStorage is not build on the idea of expiration (unlike the cookies are) so it won’t be deleted automatically, you would have to implement a way, in your code, to test the age of the data stored and remove it when it’s too old.
See this answer: https://stackoverflow.com/questions/2326943/when-do-items-in-html5-local-storage-expire

2 – As explained in the link I gave you (about localStorage), there is 2 “types” of webStorage :

HTML web storage provides two objects for storing data on the client:

window.localStorage – stores data with no expiration date
window.sessionStorage – stores data for one session (data is lost when
the browser tab is closed)

So you can use sessionStorage in place of localStorage but then the user will have to reselect his preferences every time he come back to your website after quit/restart his browser.

Note that you can remove manualy a localStorage data from your browser through it’s developer console :

click “F12” on Chrome/Firefox
It will display the developer toolbar (which is fulll of useful tools btw)
navigate to the “Application” tab on the left column, you should see a “Storage” section, then “LocalStorage”, …

Here you can see the localStorage data stored by the domaine (localStorage data are link to domaine like a cookie), and can remove some.
BUT as it has to be done manually I would reserve that to the developpement/debug sessions (a better way would to to implement it in your code as mentionned erlier) as common user will never do it of course (and should no be able to anyway).

3 – In my own opinion, localStorage is a great mecanism, but in this particular case, I would prefere cookie because it’s better fit the expected behaviour, and as it is build on the idea of expiration, you just have to set it when you create it and it will be automatically removed by your browser when expired (or sooner if the user remove the cookie manually…).

Related Posts: