[Ruby on Rails] Utilisez les cookies et ne les affichez qu'une seule fois lors de l'accès pour la première fois (en utilisant jquery.cookie.js)

Cible

• Lancez un nouveau navigateur ou Il sera affiché après 1 jour (peut être modifié dans les paramètres).

Environnement de développement

ruby 2.5.7 Rails 5.2.4.3 OS: macOS Catalina

couler

Présentation de 1 gemme 2 Chargez jquery.cookie.js 3 Modifier la vue

Introduction de gemme

Active jquery dans Rails.

Gemfile

gem 'jquery-rails'

Terminal

$ bundle insatll

app/assets/javascripts/application.js

//=nécessite jquery ← ajouté
//= require jquery_ujs ← ajouté
//= require activestorage
//= require turbolinks
//= require_tree .

Chargement de jquery.cookie.js

Ajoutez ce qui suit à la partie principale et chargez jquery.cookie.js.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

#### **`erb:app/views/layouts/application.html.erb`**

erb:app/views/homes/top.html.erb

<div class="indication">
  <div class="box">
    <p>Lorsque vous appuyez sur le bouton de fin d'affichage ci-dessous,<br>Vous ne pouvez pas le voir même si vous le mettez à jour.<br>
Il sera affiché lorsque vous lancerez un nouveau navigateur.
    </p>
    <button>Fin d'affichage</button>
  </div>
</div>

<style>
.indication{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,0.5);  
  z-index: 1;
}
.box{
  position:absolute;
  top:40%;
  left:35%;
  width:400px;
  height:150px; 
  background-color: #ffffff;
  z-index:2;
}
.box p{
    padding:15px;
}
.box button{
  display:block;
  margin:0 auto;
}
</style>

<script>
  $(function(){
    $(".indication").show();
    if($.cookie('Flg') == 'on'){
      $(".indication").hide();
    }else{  
      $(".indication").show();
    }
    $(".box button").click(function(){
      $(".indication").fadeOut();
      $.cookie('Flg', 'on', { expires: 1,path: '/' });
    });
  });
</script>

Façon de penser

if($.cookie('Flg') == 'on')À

```on```S'il n'y a pas de description de, la classe d'indication s'affiche.

 De plus, lorsque le bouton est cliqué, la classe d'indication n'est pas affichée,

#### **`$.cookie('Flg', 'on'Dans la description de`**
```cookie('Flg', 'on'Dans la description de

 Mettez la valeur «on» dans le cookie et


#### **`{ expires: 1,path: '/' });Dans la description de`**

La période de conservation du cookie est d'un jour et la plage cible est "/" pour spécifier l'ensemble du site.

• Veuillez vous référer à ce site pour spécifier la période de stockage. Comment utiliser jquery.cookie.js et comment spécifier la durée de vie (période de rétention) de COOKIE en secondes, minutes et heures

Résumé

Il peut ne pas être utilisé si souvent, Je pense que c'est efficace pour les sites auxquels vous devez faire attention et les sites que vous souhaitez enregistrer.

De plus, sur Twitter, les technologies et les idées qui n'ont pas été téléchargées sur Qiita sont également téléchargées, donc Je vous serais reconnaissant si vous pouviez me suivre. Cliquez ici pour plus de détails https://twitter.com/japwork