CODEWITHSUNDEEP
javascriptphpjquerywordpress
Selcuk xD
Selcuk xD

Reputation: 100

Display an an element(by ID) only per web session

I have this widget element that needs to show up per web session and not for each page and after some research i realized i need to set cookies for this element.

What can you suggest me on this?

UPDATE >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>:

I had some help from the answers below and so far this is what we came up with and even though the new script adds a storage session, it doesn't actually replace the display:block rule with none.

if (window.sessionStorage.getItem("elementViewed") === "true") {
  let element = document.getElementById('block-16');
  element.style.display = 'none';
}
body {
  height: 20vh;
}

#block-16 {
  position: fixed!important;
  width: auto;
  right: 100px;
  top: 15px;
  padding: 30px;
  background-color: green;
  font-size: 50px;
  z-index: 2;
}

aside {
  display: block
}
<aside id="block-16" class="footer_widgets widget_block col-xs-12 col-md-3">
  <p>test</p>
  <!-- A slider shortcode comes here and this slider has its own animation like fadeIn and FadeOut in 10 seconds thats why it doesnt need an extra animation script or Css rule -->

Upvotes: 0

Views: 86

Answers (1)

Rhys Mills
Rhys Mills

Reputation: 197

One option is to use the window.sessionStorage property, which is scoped to the current browser session.

You would set a value in sessionStorage after the first view of the element, or on click if it has a close button.

Setting the value would look something like:

window.sessionStorage.setItem("elementViewed", "true");
// true is a string, as sessionStorage key and value are strings

Then you'd check for that value on page load:

if (window.sessionStorage.getItem("elementViewed") === "true") {
    let element = document.getElementById('block-16');
    element.style.display = 'none';
}

Upvotes: 2

Related Questions