Saving to Local Storage

Literally Canvas can serialize the user’s drawing as a Javascript object. Generally, you probably want to do this in response to the drawingChange event.

Here’s a complete example that saves the drawing to localStorage so that when the user refreshes the page, the drawing persists.

<div class="literally localstorage"></div>

<script>
  $(document).ready(function() {
    var lc = LC.init(
      document.getElementsByClassName('literally localstorage')[0]);
    var localStorageKey = 'drawing'
    if (localStorage.getItem(localStorageKey)) {
      lc.loadSnapshot(JSON.parse(localStorage.getItem(localStorageKey)));
    }
    lc.on('drawingChange', function() {
      localStorage.setItem(localStorageKey, JSON.stringify(lc.getSnapshot()));
    });
  });
</script>