javascript jquery keep hide/remove even after page refreshed

Question

I'm trying to hide or remove some html element when user is clicked the dropdown menu.

What i have already tried :

$("#notif").click(function(){
$("#count").remove();
});

But the problem is when user refresh the page, the #count element is show again. How to keep hiding the #count when the user is logged in even the page is refreshed and show it again when user re-login i'm dont know much about javascript.

Can i do this in javascript/jquery ? or Should i keep the value on php session or something?.

[Use local storage](http://stackoverflow.com/a/12063002/4248328) — Alive to die - Anant, Mar 09 '17 at 06:39
as commented above you can use localStorage or cookies for this purpose. — Abhinav, Mar 09 '17 at 06:42
i dont want a permanent solution. i already edited my question user will see #count again when they are relogged in — Raphael, Mar 09 '17 at 07:08
see my code below its fully working and will server your purpose. you will just need to remove cookies when user logged out. — Abhinav, Mar 09 '17 at 07:10
@Raphael is not really good and unfair to change your answer which you have excepted after user taking time to solve your problem. It should be flagged and users here are known and work for reputations.. — Abhinav, Mar 10 '17 at 12:40

bikash.bilz · Answer 1 · 2017-03-09T06:59:52.147

0

it is so simple.

$(document).ready(function(){
   var x=$("#notif option:selected").val();
    if(x=="" || x==0){$("#count").remove();}
});

Place above code in javascript file or in script tag.

edited Mar 09 '17 at 06:59

answered Mar 09 '17 at 06:44

bikash.bilz

821
1
13
33

how you will sustain this on page refresh? – Abhinav Mar 09 '17 at 07:17

praveena · Answer 2 · 2017-03-09T06:55:04.840

0

<?php
if(!isset($_SESSION["session_name"]))
{
$_SESSION["session_name"]='';
}
?>
<script>
var session=<?php echo $_SESSION["session_name"]; ?>;
if(session!='')
{
$("#count").hide();
}
</script>

edited Mar 09 '17 at 06:55

answered Mar 09 '17 at 06:48

praveena

222
3
6

score 0 · Answer 3 · answered Mar 09 '17 at 06:48

0

//one option
$(document).ready(function(){
   $("#count").hide();  
});
//second option
$(document).ready(function(){
   $("#count").remove();  
});
//third option
$(document).ready(function(){
   $("#count").css("display","none");  
});

answered Mar 09 '17 at 06:48

Nishit Manjarawala

451
4
20

this will always hide the count irrespective of your click on hide button or not – Abhinav Mar 09 '17 at 06:50
you can store user action in database and when load or refresh give css as u save action in db – Nishit Manjarawala Mar 09 '17 at 06:54
but where you checking it into your solution? – Abhinav Mar 09 '17 at 06:57

score 0 · Accepted Answer · edited Jun 04 '17 at 10:35

I'm using jQuery plugin (jQuery cookies) for this, you can get the same from https://github.com/js-cookie/js-cookie

First of all set the cookies when user click the button in

$("#notif").click(function() {
    Cookies.set('RemoveCount', 'true');

    $("#count").hide();
});

Then on your pageload you can check this for your purpose

$(function() {
    if (Cookies.get('RemoveCount') == 'true' && Cookies.get('RemoveCount') != 'undefined') {
        $("#count").hide();
    } else {
        $("#count").show();
    }
}

<html>
<head>
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
<script src="../js.cookie.js"></script>
</head>
<body>
    <button id='clckced'> removeCount</button>
    <div id="RemoveCount">
    This should be removed.
    </div>
    <script>
        $(function(){
            if (Cookies.get('RemoveCount') == 'true' && Cookies.get('RemoveCount') != 'undefined' ){
                $("#RemoveCount").hide();
                } else {
                    $("#RemoveCount").show();
                }
            $('#clckced').click(function(){
                Cookies.set('RemoveCount', 'true');
                $("#RemoveCount").hide();
            })
        });
    </script>

</body>
</html>

just Remove Cookies when user logged out...

Cookies.remove('RemoveCount');

there should not be any problem with laravel as you just need to play with JS and jQuery. — Abhinav, Mar 09 '17 at 09:14

score 0 · Answer 5 · answered Mar 09 '17 at 07:01

0

similarly i tried like this

$("#notif").click(function(){
$("#count").remove();
});

i have using session storage , it is stored in client slide

check this link :

http://jsfiddle.net/h4JXs/5300/

answered Mar 09 '17 at 07:01

Gobinath Rangaraj

21
1

score -1 · Answer 6 · edited May 23 '17 at 11:53

-1

You can also use sessionStorage (or localStorage) to remember the click.

Every time the page loads, first check the storage to check if the user clicked. If so, #count is removed.

When the user clicks #notif, remove the #count element, and save the information into the storage so that next time the page is load it can be removed again.

sessionStorage will save the information locally while the browser window or tab is open. localStorage would save it permanently, until explicitely deleted.

In this question you have a nice discussion on the differences between localStorage, sessionStorage, cookies and session: What is the difference between localStorage, sessionStorage, session and cookies?

In your case, I think the most appropriate solution is sessionStorage (or localStorage depending on how persistant you want the information), as there is no need to send this information to the server.

<html>
  <head>
    <script
       src="https://code.jquery.com/jquery-3.1.1.min.js"
       integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
       crossorigin="anonymous"></script>
  </head>
  <body>
    <button id='notif'> removeCount</button>
    <div id="count">
      This should be removed.
    </div>
    <script>
      window.onload = function() {
        if (window.sessionStorage && window.sessionStorage.getItem('removeCount') == 'true' ) {
          $("#count").remove();
        } 

        $('#notif').click( function() {
          if (window.sessionStorage) {
            window.sessionStorage.setItem('removeCount', 'true');
            $("#count").remove();
          }
        });
      }
    </script>

  </body>
</html>

edited May 23 '17 at 11:53

Community

1
1

answered Mar 09 '17 at 11:15

airos

742
5
14

are you really dumb or trying to be.. cookies stored into local machine only unless it is explicitly integrated for server usage.. just by reading answer from question need not mean that it will be true for all cases... – Abhinav Mar 10 '17 at 12:38
cookies are stored locally (in the client). However, they are transferred between the server and the client for each request (see e.g. [https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie](https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie)), which is what I intended to say – airos Mar 10 '17 at 14:54
again, if requested by server if not they will not – Abhinav Mar 10 '17 at 15:02
Can you please provide any reference supporting that cookies are not sent to server unless requested by server? – airos Mar 13 '17 at 09:17
afaik HTTP is a stateless protocol. It is the client the one that innitiates the communication each time, not the server. Thus, the server cannot make such request.Whenever the client sends a request to a server, all associated cookies are sent in the HTTP headers.The usual approach is server sets cookies, sends them to client, client stores them locally and every time client requests a page, the HTTP header includes the cookies (of course, the ones that match domain, path...).[https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies) – airos Mar 13 '17 at 09:25
I appreciate your efforts of searching documents and reference over the web for this request. See http cookies can be sent to server only if it is relevant, e.g. if you have google related cookies, it will be sent to google only and not every page. Similarly here we are setting cookies which is not relevant to any website. hope you get into summary :) – Abhinav Mar 13 '17 at 09:34
Again, http cookies are sent to the server You can check in the documentation of the library you are using in your own answer [https://github.com/js-cookie/js-cookie](https://github.com/js-cookie/js-cookie) that cookies are always assotiated to a domain. There are no "cookies which are not relevant to any website". – airos Mar 13 '17 at 16:22

javascript jquery keep hide/remove even after page refreshed

6 Answers6