Fun with CoffeeScript, jStorage and jQuery

Local storage

I wanted to try browser local storage possibilities. I found that jStorage is a no brainer to use and works in most browsers (IE6+ (bigger storage size in IE8+), Chrome 4+. Firefox 2+, Safari 4+, Opera 10.50+):

Set value

$.jStorage.set(key, value)

Get value

alert ($.jStorage.get(key)

And yes it preserves data over browser restarts, and deleted cookies.

CoffeeScript

I also wanted to try out CoffeeScript, with which JavaScript syntax is made very nice.

Be sure to have a look at this videos: Creator Jeremy Ashkenas about CoffeScript Ashkenas at jsconf

Here’s a complete “text editor” (ehrm…) CoffeScript code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js"></script>
<script src="/scripts/js/jstorage.js"></script>
<script type="text/coffeescript">
     
      $('#clear').click ->
        $('#filecontents').val('')
        
      $('#save').click ->
        key = $('#filename').val()
        value = $('#filecontents').val()
        $.jStorage.set(key,value)
        alert "Saved"
        
      $('#load').click ->
        key = $('#filename').val()
        value = $.jStorage.get(key)
        $('#filecontents').val(value)
        alert "Loaded"
     
</script>

… and with a little polishing…

<script type="text/coffeescript">

  ### Define functions ###

  showStatus = (message) ->
    $('#status').show().html(message).fadeOut(2222)
  
  clearValue = ->
    $('#filecontents').val('')
    showStatus 'Cleared'        
    
  saveValue = ->
    key = $('#filename').val()
    value = $('#filecontents').val()
    $.jStorage.set(key,value)
    showStatus 'Saved'
  
  loadValue = ->
    key = $('#filename').val()
    value = $.jStorage.get(key)
    $('#filecontents').val(value)
    showStatus 'Loaded'       
    
  ### Hook functions to events ###

  $('#clear').click -> clearValue()       
  $('#save').click -> saveValue()         
  $('#load').click -> loadValue()    

</script>

The markup:

  <h1>CoffeeScript, jStorage and jQuery<span id="message"></span></h1>
  "Filename":<input type="text" id="filename" value="default"/>
  <a href="#" id="clear">Clear</a>
  <a href="#" id="save">Save</a>
  <a href="#" id="load">Load</a><br/>
  <span id="status"></span>
  <br/>
  <textarea id="filecontents" rows=3 cols=40></textarea>

Conclusion

I think I found two new toys, err… tools for my dev toolbox today.

Advertisements

One thought on “Fun with CoffeeScript, jStorage and jQuery

  1. No need to pass an anonymous function wrapping your event handlers. Just pass a direct reference to the function.

    i.e:

    $(‘#load’).click loadValue

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s