[Ruby on Rails] Verwenden Sie Cookies und zeigen Sie sie beim ersten Zugriff nur einmal an (mit jquery.cookie.js).

Ziel

• Starten Sie einen neuen Browser oder Es wird nach 1 Tag angezeigt (kann in den Einstellungen geändert werden).

Entwicklungsumgebung

ruby 2.5.7 Rails 5.2.4.3 OS: macOS Catalina

fließen

Einführung von 1 Edelstein 2 Laden Sie jquery.cookie.js 3 Ansicht bearbeiten

Einführung von Edelstein

Aktiviert die Abfrage in Rails.

Gemfile

gem 'jquery-rails'

Terminal

$ bundle insatll

app/assets/javascripts/application.js

//=erfordern jquery ← hinzugefügt
//= require jquery_ujs ← hinzugefügt
//= require activestorage
//= require turbolinks
//= require_tree .

Laden von jquery.cookie.js

Fügen Sie dem Kopfteil Folgendes hinzu und laden Sie 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>Wenn Sie die Display-End-Taste unten drücken,<br>Sie können es nicht sehen, selbst wenn Sie es aktualisieren.<br>
Es wird angezeigt, wenn Sie einen neuen Browser starten.
    </p>
    <button>Ende der Anzeige</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>

Denkweise

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

```on```Wenn keine Beschreibung von vorhanden ist, wird die Anzeigeklasse angezeigt.

 Wenn Sie auf die Schaltfläche klicken, wird die Anzeigeklasse nicht angezeigt.

#### **`$.cookie('Flg', 'on'In der Beschreibung von`**
```cookie('Flg', 'on'In der Beschreibung von

 Setzen Sie den Wert von "on" in das Cookie und


#### **`{ expires: 1,path: '/' });In der Beschreibung von`**

Die Aufbewahrungsdauer des Cookies beträgt einen Tag, und der Zielbereich ist "/", um die gesamte Site anzugeben.

• Auf dieser Website finden Sie Informationen zur Speicherdauer. Verwendung von jquery.cookie.js und Angabe der Lebensdauer (Aufbewahrungsdauer) von COOKIE in Sekunden, Minuten und Stunden

Zusammenfassung

Es kann nicht so oft verwendet werden, Ich denke, dass es für Websites effektiv ist, bei denen Sie vorsichtig sein müssen, und für Websites, die Sie registrieren möchten.

Auf Twitter werden auch Technologien und Ideen hochgeladen, die nicht auf Qiita hochgeladen wurden Ich wäre Ihnen dankbar, wenn Sie mir folgen könnten. Klicken Sie hier für Details https://twitter.com/japwork