<h1>HTML5 Web Storage</h1>
<ul>
  <li id="set">Set</li>
  <li id="get">Get</li>
  <li id="remove">Remove</li>
</ul>
<div id="content"></div>
h1 {
  text-align: center;
}
ul {
  list-style: none outside none;
  display: flex;
  justify-content: center;
  
  li {
    cursor: pointer;
    padding: 10px 15px;
    margin: 5px;
    background: #f36;
    border-radius: 5px;
    color: #fff;
    
    &:hover {
      background: darken(#f36, .15);
    }
  }
}

#content {
  text-align: center;
}
(function (){
  let setBtn = document.getElementById('set');
  let getBtn = document.getElementById('get');
  let removeBtn = document.getElementById('remove');
  let contentBox = document.getElementById('content');
  setBtn.addEventListener('click',setStorage, false);
  getBtn.addEventListener('click', getStorage, false);
  removeBtn.addEventListener('click', removeStorage, false);
  
  function setStorage() {
    localStorage.setItem('name', 'W3cplus.com');
    sessionStorage.setItem('name', 'W3cplus.com');
  }
  
  function getStorage(){
    let localContent = localStorage.getItem('name');
    let sessionContent = sessionStorage.getItem('name');
    contentBox.textContent = 'Local Storage:' + localContent +' | Session Storage: ' + sessionContent;
  }
  
  function removeStorage(){
    localStorage.removeItem('name');
    sessionStorage.removeItem('name');
  }
  
})();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.