Question

I’m going to use Mousetrap so when a user presses Alt+L it uses jQuery and adds the class light to body tag, I’d also like it to remove the class once Alt+L is pressed.

How can I add localstorage to remember if there is class light?

Answer 1

I won’t provide the code because it’s so simple that I don’t need to. Instead, I will provide you guidance to use documentation which will give you answers to the api’s you request information about.

localStorage is incredibly straight forward. It’s a simple key/value store.

https://developer.mozilla.org/en-US/docs/DOM/Storage

The Mozilla Developer Network will provide you information on what api’s do and how they work (with working examples).

I’d also like to mention, that there is likely questions about localStorage on StackOverflow already. Here is a post on StackOverflow – Modify localstorage?

Welcome.

---

To match the OP’s REAL question, “How can I use localStorage to remember which classes were set on an element”.

var $body = $("body");

// On ALT+L event
if ($body.hasClass("light")) {
    $body.addClass("light");
    window.localStorage.hasLightClass = true;
} else {
    window.localStorage.hasLightClass = false;
    $body.removeClass("light");
}

// On page load
var hasClass = window.localStorage.hasLightClass || false;
if (JSON.parse(hasClass)) {
  $body.addClass("light");
}