如何在javascript中每个会话一次显示更改事件警报弹出窗口？

Question

I have a list of dropdown values which should alert popup once per session in javascript. On change how to alert for any value in dropdowns but it should be for one select value (dropdown). I have tried to alert. please suggest how to achieve it using session storage in javascript.

 jQuery("#dim_height").on('focus', function() { // Store the current value on focus and on change previous = this.value; }).change(function() { var r1 = confirm("Are you sure want to change the template?"); if (r1 == true) { calci_width(); } else { jQuery(this).val(previous); return; } //reset_template(previous); //calci_width(); }); jQuery("#dim_width").on('focus', function() { // Store the current value on focus and on change previous = this.value; }).change(function() { var r = confirm("Are you sure want to change the template?"); // console.log(r); if (r == true) { calci_width(); } else { jQuery(this).val(previous); return; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="dim_width" id="dim_width" class="drop"> <option value="8">8</option> <option value="12">12</option> <option value="18">18</option> <option value="24">24</option> <option value="36">36</option> <!-- <option value="48">48</option> <option value="72">72</option> <option value="84">84</option> <option value="96">96</option> --> </select> <select name="dim_height" id="dim_height" class="drop"> <option value="8">8</option> <option value="12">12</option> <option value="18">18</option> <option value="24">24</option> <!-- <option value="36">36</option> <option value="48">48</option> --> </select> 

Answer 1

Here's an example of how you can alert once per session using a cookie:

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script><!-- notice jquery version change-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery- 
cookie/1.4.1/jquery.cookie.min.js"></script><!-- added cookie plugin-->

<select name="dim_width" id="dim_width" class="drop">
    <option value="8">8</option>
    <option value="12">12</option>
    <option value="18">18</option>
    <option value="24">24</option>
    <option value="36">36</option>
</select>

Then using jquery:

$('#dim_width').on('change', function(){
     if (typeof $.cookie('alerted') === 'undefined'){//does cookie exist?
         var Selected = $('#dim_width').val();
         alert(Selected); //if not alert value
         $.cookie("alerted", 1); //then set cookie, will expire one browser closes 
      }
 })

Fiddle: https://jsfiddle.net/9wxwfs4c/2/