[jQuery] Un plugin pour afficher/masquer des éléments dans une page et conserver leur état en cache

HTML

<script src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script>
<p>Hit F12 for console.log() info!</p>
<div id="inPageNavigation" class="InPageNavigation" aria-expanded="true">
  <button id="toggleInPageNavigation" class="btn-InPageNavigation--toggle" role="button">
    <i class="fas fa-chevron-right" title="Masquer l'accès rapide"></i><i class="fas fa-chevron-left" title="Afficher l'accès rapide"></i>
  </button>
  <p>Accès rapide:</p>
  <ul>
    <li><a class="link" href="#typeIs01">Section 01 dans ma page</a></li>
    <li><a class="link" href="#typeIs02">Section 02 dans ma page</a></li>
    <li><a class="link" href="#typeIs03">Section 03 dans ma page</a></li>
    <li><a class="link" href="#typeIs04">Section 04 dans ma page</a></li>
    <li><a class="link" href="#typeIs05">Section 05 dans ma page</a></li>
  </ul>
</div>

CSS

/* 
 * Off-Canvas in-page navigation component
 */

/* Core */
.InPageNavigation {
  position: fixed;
  z-index: 10000;
}

.btn-InPageNavigation--toggle {
  position: absolute;
}

/* Skin */
.InPageNavigation {
  top: 10px;
  padding: 10px;
  width: 250px;
  border: 1px solid #bfbfbf;
  background: #fff;
}

.InPageNavigation[aria-expanded="true"] {
  right: 10px;
}
.InPageNavigation[aria-expanded="false"] {
  right: -250px;
}

.btn-InPageNavigation--toggle,
.btn-InPageNavigation--toggle:hover {
  top: -1px;
  left: -40px;
  width: 40px;
  height: 40px;
  text-align: center;
  border: 1px solid #bfbfbf;
  border-right: none;
  background: pink;
  font-size: 1.2em;
}

.InPageNavigation[aria-expanded="true"] .btn-InPageNavigation--toggle .fa-chevron-left,
.InPageNavigation[aria-expanded="false"] .btn-InPageNavigation--toggle .fa-chevron-right {
  display: none;
}
/* fin: Off-Canvas in-page navigation component */

JavaScript

/**
 * "Naked UI Toggle" jQuery plug-in
 * @author: Frank LANG (https://github.com/franklang/)
 *
 * Usage:
 * $('#targetElement').nuiToggle('#triggerElement');
 */
;( function ( $, window, undefined ) {
  $.fn.nuiToggle = function( triggerElement ) {

    var defaults = {
      triggerElement: triggerElement
    };

    var settings = $.extend( {}, defaults, triggerElement );

    // Get a dynamic local storage KEY named after given #targetElement
    const $_THIS = this,
          $_SELECTOR = $_THIS.selector,
          LOCAL_STORAGE_KEY = $_SELECTOR.substring( 1, $_SELECTOR.length ),
          // On page load or DOM ready, get current VALUE of dynamic local storage KEY (if it exists...).
          LOCAL_STORAGE_DYNAMIC_VALUE = localStorage.getItem( LOCAL_STORAGE_KEY ),
          LOCAL_STORAGE_DEFAULT_VALUE = $_THIS.attr( 'aria-expanded' );



    // Local Storage
    // If a KEY/VALUE pair is already set...
    if ( LOCAL_STORAGE_DYNAMIC_VALUE !== null ) {
        console.log('There_s already a local storage KEY called: ' + LOCAL_STORAGE_KEY + ' and it_s VALUE is: ' + LOCAL_STORAGE_DYNAMIC_VALUE);
      // ...append VALUE to selector's aria-expanded attribute in the HTML.
      $_THIS.attr( 'aria-expanded', LOCAL_STORAGE_DYNAMIC_VALUE );

    // Else...
    } else {
        console.log('There_s NO local storage KEY called: ' + LOCAL_STORAGE_KEY + ' yet, so we create one with default VALUE gathered from HTML source: ' + LOCAL_STORAGE_DEFAULT_VALUE);
      // ...dynamically set a default KEY/VALUE pair regarding generated LOCAL_STORAGE_KEY and LOCAL_STORAGE_DEFAULT_VALUE from HTML.
      localStorage.setItem( LOCAL_STORAGE_KEY, LOCAL_STORAGE_DEFAULT_VALUE );

      // If HTML selector's aria-expanded default value doesn't match with LOCAL_STORAGE_DEFAULT_VALUE from HTML...
      if ( $_THIS.attr( 'aria-expanded' ) !== LOCAL_STORAGE_DEFAULT_VALUE ) {
        // ...make it match in the HTML.
        $_THIS.attr( 'aria-expanded', LOCAL_STORAGE_DEFAULT_VALUE );
    ...