HTML and CSS Reference
In-Depth Information
<button id="clearValues">clear storage</button>
<div id="output"></output>
<script type="text/javascript">
var adStyle = document.querySelector('#style'),
clearIt = document.querySelector('#clearValues'),
output = document.querySelector('#output');
function adInit () {
if (localStorage.getItem('adValue') === 'null' || localStorage.getItem('adValue') === null) {
console.log('init')
} else {
adStyle.textContent = localStorage.getItem('adValue');
console.log(localStorage.getItem('adValue'))
output.textContent = "Values Loaded!!!";
}
adStyle.addEventListener('DOMCharacterDataModified', updateAdStyle, false);//Fires
everytime a character is changed
clearIt.addEventListener('click', clear, false);
adStyle.focus();
}
function updateAdStyle () {
if(localStorage) {
output.textContent = "Values Saved!!!";
console.log(adStyle.textContent);
//store the values
var styleFix = "<style contenteditable>" + adStyle.textContent + "</style>";
localStorage.setItem('adValue', styleFix);
}
}
function clear () {
if(localStorage.getItem('adValue') != 'null' || localStorage.getItem('adValue') != null) {
localStorage.clear();
}
output.textContent = "";
console.log('clear')
}
window.addEventListener('DOMContentLoaded', adInit, false);
</script>
</body>
</html>
As you can see from the previous example, you're allowing the user to edit the CSS directly on the page, or in
this case the 300 ´ 250 ad unit. From the edits that the user makes, you store a long string value in
localStorage
by
the name of
adValue
. Now, the next time the user views the ad, the values will be stored and still available to be
manipulated. This really opens up the doors to truly customized ad experiences.
