Store WordPress commenter data in localStorage rather than cookies

Keeping any data that doesn’t need to be sent back to the server with every request in cookies is inefficient. WordPress by default will save the name, email address, and home page of any user that leaves a comment in three separate cookies. Each subsequent request to the server will then contain this mostly useless data that just slows things down and introduces hurdles for efficient intermediary caching.

In this article, I’ll walk you through how to either disable the storing of this data entirely, or move the data into localStorage and just keep it locally on visitors’ devices.

There are two equivalent ways you can prevent the server from setting these cookies when a user leaves a comment. Either include the following line of code in your theme’s functions.php file:

remove_action('set_comment_cookies', 'wp_set_comment_cookies');

Or install the Cookieless Comments plugin, which will take care of including the above one-line of code for you.

At this point, the data on the commenter is only preserved in your WordPress database and the commenter’s browser is no longer retaining this information for future visits. If this is what you wanted, then you’re done. If you do want to preserve the data in the visitor’s browser, however, keep on reading.

Saving data in localStorage does introduce a JavaScript dependency, as the default cookie method will work in even ancient browsers as long as cookies are enabled. However, this isn’t an essential functionality required to submit comments or access any of the data on your website. Storing and retrieving the commenter’s earlier input data is a progressive enhancement, so leaving it out on older browsers is considered acceptable.

The below JavaScript example stores the commenter’s personal data in their browser’s localStorage when they submit a comment, and retrieves it if there’s a comment form on the page on later visits.

// SPDX-License-Identifier: CC0-1.0

if (typeof(Storage) !== 'undefined') {
  var commentform = document.getElementById('commentform');
  if (commentform) {
    var author = document.getElementById('author'),
      email  = document.getElementById('email'),
      url = document.getElementById('url');
    if (author && email && url) {
      // store comment data when a comment is submitted
      commentform.addEventListener('submit', function () {
        localStorage.setItem('comment_author',  author.value);
        localStorage.setItem('comment_email',   email.value);
        localStorage.setItem('comment_webpage', url.value);
      });
      // populate the form with previously saved values
      if (localStorage.length >= 2) {
        author.value = localStorage.getItem('comment_author') || '';
        email.value = localStorage.getItem('comment_email') || '';
        url.value =  localStorage.getItem('comment_webpage') || '';
} } } }

You can include it on your post pages however you like; for example as part of another script or as a separate file. If you store it in a separate file, you can include it only on pages where comments are enabled (not strictly required, but nice for performance on uncommentable pages.) The following example demonstrates how to use WordPress conditionals to only include a script on pages that accept comments:

// SPDX-License-Identifier: CC0-1.0

function enqueue_comment_localstorage_script() {
  if (is_singular() && comments_open()) {
    wp_enqueue_script('comment-localstorage',
                      'comment_helper.js',
                      NULL, NULL, TRUE);
} }
add_action('wp_enqueue_scripts',
           'enqueue_comment_localstorage_script');

Please do remember to update your website’s privacy policy to reflect the changes you’ve made to what data is saved on the visitor’s device and how it’s used. It’s especially interesting to update the description on how the data on the commenter is no longer transmitted with every single request back to the server.

If you want to get all cheesy with the visitor, you can now start greeting them by name by reading out the 'comment_author' key from localStorage. A more useful application of this data is to highlight the visitor’s own comments or even replies to their own comments.

I intend to come back to why changing away from using cookies may be necessary in an upcoming article. Get my newsletter to make sure you catch it!