[Ruby on Rails] Cookie is used and displayed only once at the first access (using jquery.cookie.js)

Target

• Launch a new browser or It will be displayed after 1 day (can be changed in the settings).

Development environment

ruby 2.5.7 Rails 5.2.4.3 OS: macOS Catalina

flow

Introduction of 1 gem 2 Load jquery.cookie.js 3 Edit view

Introduction of gem

Enables jquery to be used in Rails.

Gemfile

gem 'jquery-rails'

Terminal

$ bundle insatll

app/assets/javascripts/application.js

//=require jquery ← added
//= require jquery_ujs ← added
//= require activestorage
//= require turbolinks
//= require_tree .

Loading jquery.cookie.js

Add the following to the head part and load 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>When you press the display end button below,<br>You cannot see it even if you update it.<br>
It will be displayed when you launch a new browser.
    </p>
    <button>End of display</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>

Way of thinking

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

```on```If there is no description of, the indication class is displayed.

 Also, when the button is clicked, the indication class is not displayed,

#### **`$.cookie('Flg', 'on'In the description of`**
```cookie('Flg', 'on'In the description of

 Put the value of ‘on’ in the cookie and


#### **`{ expires: 1,path: '/' });In the description of`**

The cookie retention period is one day, and the target range is "/" to specify the entire site.

• Please refer to this site to specify the storage period. How to use jquery.cookie.js and how to specify the life (retention period) of COOKIE in seconds, minutes, hours

Summary

It may not be used that often, I think that it is effective for sites that you have to be careful about and sites that you want to register.

Also, on twitter, technologies and ideas that are not uploaded to Qiita are also uploaded, so I would be grateful if you could follow me. Click here for details https://twitter.com/japwork