stevenaw/Cookie management

## Cookie management
<html>
  <head>
    <style type="text/css">
      .selectedClass {
        background-color: red;
      }

      #testTable {
        cursor: pointer;
      }
    </style>
    <script type="text/javascript" src="./jquery-1.6.2.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        var cookie = (function() {
          var doc = document,
              undef;

          return {
            // These functions modified from ppk's: http://www.quirksmode.org/js/cookies.html
            set: function (name,value,days) {
              var expires = "";

              if (days === undef) {
                this.set(name, value, 10*365);
                return;
              } else if (days) {
                var date = new Date();
                date.setTime(date.getTime()+(days*24*60*60*1000));
                expires = "; expires="+date.toGMTString();
              }

              doc.cookie = name+"="+value+expires+"; path=/";
            },
            get: function (name) {
              if(!name) {
                return undef;
              }

              var nameEQ = name + "=",
                  cookies = doc.cookie.split(";");

              for(var i=0, l = cookies.length; i < l; i++) {
                var c = cookies[i],
                    j = 0,
                    clen = c.length;

                while (j < clen && c.charAt(j) === ' ') {
                  j++;
                }

                if(j == clen) {
                  continue;
                } else if (c.indexOf(nameEQ,j) === 0) {
                  return c.substr(nameEQ.length);
                }
              }
              return undef;
            },
            clear: function (name) {
              this.set(name,"",-1);
            }
          };
        })();

        function putToString(selector, fn) {
          var r = [];

          $(selector).each(function(i, elem) {
            r.push(fn(elem));
          });

          return r.join('');
        }

        function pullFromString(selector, fn) {
          $(selector).each(function(i, elem) {
            fn(elem, i);
          });
        }

        var tblId = "testTable";
        var className = "selectedClass";
        var cellSelector = "#" + tblId + " tr td";
        var recId = 54;
        var oldCookieVal = cookie.get("cookie"+recId);
        var isCleared = false;

        if(oldCookieVal) {
          pullFromString(cellSelector, function(elem, i) {
            if(oldCookieVal.charAt(i) === '1') {
              $(elem).addClass(className);
            }
          });
        }

        // Add classes on mouse down on cell
        $(cellSelector).bind("mousedown", function() {
          var v = $(this);

          if(v.hasClass(className)) {
            v.removeClass(className);
          } else {
            v.addClass(className);
          }
        });

        // Store in cookie when leaving page
        $(window).unload(function() {
          if(!isCleared) {
            cookie.set("cookie"+recId, putToString(cellSelector, function(elem) {
              return $(elem).hasClass(className) ? 1 : 0;
            }));
          }
        });

        $("#btnClear").click(function() {
          cookie.clear("cookie"+recId);
          isCleared = true;
          location.reload(true);
        });
      });
    </script>
  </head>
  <body>
    <table id="testTable">
      <tr>
        <th>Blah</th>
        <th>Blah2</th>
        <th>Blah3</th>
        <th>Blah4</th>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>345</td>
        <td>245</td>
        <td>376</td>
        <td>412</td>
      </tr>
    </table>

    <button id="btnClear">Clear and Refresh</button>
  </body>
</html>
No results found