Often, I visit web sites that display some notification or clever welcome message that I can dismiss if I don't want to see it all the time...or EVER! Once I dismiss that piece of UI, it doesn't appear again. If you were ever curious on how to do something like that, this snippet will help you out.

The Example

Below is an example of this snippet running (you can also view it in its own page):

Click on the colored rectangles to cause them to disappear. Reload this page to see that they remain in their lazy, disappeared state. If you want to bring the dismissed rectangles back, click on the BRING'em ALL BACK link.

The HTML

The HTML for this example look as follows:

<div id="firstItem" class="dismiss color1">
click to dismiss
</div>

<div id="secondItem" class="dismiss color2">
click to dismiss
</div>

<div id="thirdItem" class="dismiss color3">
click to dismiss
</div>

<div id="fourthItem" class="dismiss color4">
click to dismiss
</div>

<p id="restoreLink">BRING'em ALL BACK</p>

The things to note are the class values for the div elements.

The CSS

The CSS is probably the least interesting part of this example. Given that, I'm only posting the style rule that actually matters to the hiding of content:

.hide {
	display: none;
}

The addition of this class to the div elements is what determines whether that div is visible on the page or not. How does that happen you say? Easy. It is handled by the JavaScript you will be seeing next.

The JavaScript

Our JavaScript is responsible for ensuring the hide style rule gets added to the correct div on click, and it is also responsible for saving that data to local storage.

var dismissedElements;

document.addEventListener("DOMContentLoaded", setup, false);

function setup(e) {
	setupEventListeners();
	setInitialVisibility();
}

function setInitialVisibility() {
	dismissedElements = JSON.parse(localStorage.getItem("dismissStorageItem"));
	
	if (dismissedElements != null) {
		for (var i = 0; i < dismissedElements.length; i++) {
			var dismissedElement = document.querySelector(dismissedElements[i]);
			addClass(dismissedElement, "hide");
			}
	} else {
		dismissedElements = [];
	}
}

function setupEventListeners() {
	var dismissElements = document.querySelectorAll(".dismiss");
	
	for (var i = 0; i < dismissElements.length; i++) {
		var dismissElement = dismissElements[i];
	
		dismissElement.addEventListener("click", hideElement, false);
	}
	
	var restoreElement = document.querySelector("#restoreLink");
	restoreElement.addEventListener("click", restoreEverything, false);
}

function restoreEverything(e) {
	dismissedElements = [];
	storeData();

	window.location.reload(true);
}

function hideElement(e) {
	var elementGettingDismissed = e.target;
	
	dismissedElements.push("#" + elementGettingDismissed.id);
	addClass(elementGettingDismissed, "hide");
	
	storeData();
}

function storeData() {
	localStorage.setItem('dismissStorageItem', JSON.stringify(dismissedElements));
}

//
// Shamelessly stolen from: http://bit.ly/addClassSnippet
// 
function addClass(element, classToAdd) {
	var currentClassValue = element.className;
	
	if (currentClassValue.indexOf(classToAdd) == -1) {
		if ((currentClassValue == null) || (currentClassValue === "")) {
			element.className = classToAdd;
		} else {
			element.className += " " + classToAdd;
		}
	}
}

The quantity of JavaScript may seem a bit overwhelming, but once you strip out the event handling logic, you are left with just a few lines of real code for dealing with adding a class and ensuring the data gets stored to the local storage correctly.

Further Exploration

If you want to know more about techniques demonstrated in this snippet or other clever ways it can be used, check out the following articles:

• Add Class and Remove Class
• HTML5 Local Storage
• Arrays in JavaScript

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!