cross-cookie playground

by lquixada

HTML

<script src="https://unpkg.com/es6-promise/dist/es6-promise.auto.min.js"></script>
<script src="https://unpkg.com/cross-cookie/dist/cross-cookie.js"></script>
<h3>cross-cookie playground</h3>

<p>
<small>
Note: <a href="https://github.com/stefanpenner/es6-promise" target="_blank">es6-promise</a> polyfill has been added in order to proper work in Internet Explorer.
</small>
</p>


<span>logger</span>
<pre id="content">
  loading..
</pre>

CSS

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
}

span {
  display: inline-block;
  padding: 5px 10px;
  color: #fff;
  font-size: 12px;
  background-color: #5389d6;
  border-radius: 4px 4px 0 0;
}

pre {
  margin: 0;
  padding: 10px;
  font-size: 12px;
  background-color: #c7deff;
  border: 2px solid #5389d6;
  border-radius: 0 3px 3px 3px;
  overflow-x: scroll;
}

JavaScript

var content = document.getElementById('content');

// Stores simple values
cookie.set({
    id: 1,
    name: 'Marcus',
    active: true
  })
  .then(() => {
  	content.innerText = 'Stores simple values:\n';
    content.innerText += document.cookie+'\n\n';
  })
   
  // Stores complex values
  .then(() =>
    cookie.set({
      user: {
        id: 2,
        name: 'John',
        active: false
      }
    })
  )
  .then(() => {
    content.innerText += 'Stores complex values:\n';
  	content.innerText += document.cookie+'\n\n';
  })
  
  // Retrieves all values
  .then(() => cookie.getAll())
  .then(cookies => {
    content.innerText += 'Retrieves all values:\n';
  	content.innerText += JSON.stringify(cookies, null, 2)+'\n\n';
  })
  
	// Remove current user
  .then(() => cookie.remove('active'))
  .then(() => {
    content.innerText += 'Remove cookie active:\n';
  	content.innerText += document.cookie+'\n\n';
  })

  // Clears all keys
  .then(() => cookie.clearAll())
  .then(() => {
    content.innerText += 'Clears all values!\n';
  	content.innerText += '"'+document.cookie+'"';
   });