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) {
} else {
adStyle.textContent = localStorage.getItem('adValue');
output.textContent = "Values Loaded!!!";
adStyle.addEventListener('DOMCharacterDataModified', updateAdStyle, false);//Fires
everytime a character is changed
clearIt.addEventListener('click', clear, false);
function updateAdStyle () {
if(localStorage) {
output.textContent = "Values Saved!!!";
//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) {
output.textContent = "";
window.addEventListener('DOMContentLoaded', adInit, false);
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.
Search WWH ::

Custom Search