Category: jQuery

If you haven’t used JavaScript’s “localStorage” before – now’s the time to at least look at it.

It allows for some really simple data storage – in a way similar to cookies but much easier ( in my opinion ) to work with.

So adding an item to it is as simple as:

localStorage.setItem('checkbox-name', 'checked');

Retrieving the value, let’s say after a page refresh, is as simple as:

var checkbox_state = localStorage.getItem('checkbox-name');

Which brings us to the subject of this article.

Saving a form state

You can use the simple syntax above to store the state of a checkbox or any other input to avoid frustrating your website visitors.

I’ve found this very helpful in a cart-like page where users could select some options and further navigate the website before submitting.

Instead of having to create a back-end storage for a form state that would get discarded after submission if found it much more straight-forward to use localStorage.

Here some sample code:

m_form.on('change', '.checkbox', function(e) {
   var name = $(this).attr('name');
   localStorage.setItem(name, $(this).is(':checked'));
   update_notice_message(); // An example function which you can call
});

This in turn allows you to retrieve the data on page load and keep the form state. Something among the lines of:

checkboxes.each( function () {
   var name = $(this).attr('name');
   var checked = JSON.parse(localStorage.getItem(name));
   if (checked === true) {
      $(this).prop('checked', true);
      $(this).parent().addClass('selected');
   }
});

See how the flexibility of these methods allows us to make a form more enjoyable in just a few lines of code?

When building web directories in particular or websites in general you often need copy & print functionalities.

For example you could allow users to easily copy an address. Or maybe you want to allow users to print certain elements from a list – like a search result.

Having tried & used multiple solutions in the past I recently found a combination which I think works great.

As a result, I suggest using 2 simple plugins.

Copy / Clipboard

For the copy/functionality, the best cross-browser solution, in my opinion, at this moment is clipboard.js.

A quick usage example ( besides the examples on their website ) would be:

The plugin gets its value from the data attribute “data-clipboard-text” in the example above. Also the button’s text is changed, after clicking the link, so your users have a nice feedback.

Printing

A good stylesheet is the key to printing pages properly. The problem is that sometimes it’s hard to manage this for dynamic elements. One solution which I used successfully is the jQuery plugin printThis.

This plugin gives you the option to directly print independent elements. Let’s say you want to allow users to print only the search result relevant to them.

Here’s a code sample which I think is self-explanatory, the plugin is very easy to use.

The 2 examples above will come in handy for many websites. I think these plugins will allow you to easily integrate functionality which will make the website more interactive.