Hide div and store local storage not to show div on page refresh

JavaScript
1

I have an image button in a div when click I want to hide image button and somehow store to local storage not to show div again on page refresh.

<div class="whatsapp"><a href="https://chat.whatsapp.com/........." target="_blank">
<img src="/img/whatsapp_group.png" alt="Whatsapp Join Button"><div class="whatsappbut">To Find Out MORE!</div></a></div>
2

Hi,

I’m not sure this can be solved in the HTML&CSS forum. :slight_smile:

The link target opens in a new window/tab, could you explain the purpose of hiding the div in the page the user has left?

I think knowing the circumstances would help figuring out solutions.

(And maybe if another forum suits better.) :slight_smile:

1 Like
3

Hi there johan40,

localStorage is, as Erik_J has suggested, JavaScript. :winky:

Here is a basic example of it’s usage…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f0f0f0;
    font: normal 1em / 1.5em sans-serif;
 }

 .hide {
 	display: none;
 }   
</style>

</head>
<body>

 <a id="one-time-link" href="https://www.example.com">
   Go to example.com
 </a>

<script>
(function( d ) {
   'use strict';
   var element = d.getElementById( 'one-time-link' );
       element.classList.add( localStorage.getItem( 'remove-link' ) );
       element.addEventListener( 'click',
         function(){
                     localStorage.setItem( 'remove-link', 'hide' );
                   }, false);
}( document ));
</script>

</body>
</html>

coothead

2 Likes
4

Another option you might want to look at is Window.sessionStorage

With localStorage even after closing the browser the data is still stored for next time.

You have to manually remove it with localStorage.clear() — this might be what you want, I don’t know.

With sessionStorage the data is cleared when the page session ends (It’s closed).

An example with coothead’s code

(function( d ) {
   'use strict';
   var element = d.getElementById( 'one-time-link' );
      element.classList.add( sessionStorage.getItem( 'remove-link' ) );
      element.addEventListener( 'click',
        function(){
          sessionStorage.setItem( 'remove-link', 'hide' );
        }, false);
}( document ));
1 Like
5

It’s a signup button and once signed up it should not display again and Thanx code works 100%

1 Like
6

Thanks for clarification, though it left open what should happen if a signup fails.

But I think that has already been taken care of by @johan40. :slight_smile:

Happy you got it all solved!

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.