How to keep cookies from transforming an element?

Question

HTTP Cookies

There is a certain square object, I transform it, distort it, but when the page is updated, everything returns to its place, I need the ability to save either the cookie or in the database
Example
codepen.io/fta/pen/ifnqH

Answer 1

You hang up an event to change the parameters of the square, which writes the key parameters to cookies. When you open the page, you load from there. You can google how to work with cookies in js, here are the functions that I use:

function set_cookie ( name, value, exp_y, exp_m, exp_d, path, domain, secure ) {
  var cookie_string = name + "=" + escape ( value );
  if ( exp_y ) {
    var expires = new Date ( exp_y, exp_m, exp_d );
    cookie_string += "; expires=" + expires.toGMTString();
  }
 
  if ( path )
    cookie_string += "; path=" + escape ( path );
 
  if ( domain )
    cookie_string += "; domain=" + escape ( domain );
  
  if ( secure )
    cookie_string += "; secure";
  
  document.cookie = cookie_string;
}

function delete_cookie ( cookie_name ) {
  var cookie_date = new Date ( );  // Текущая дата и время
  cookie_date.setTime ( cookie_date.getTime() - 1 );
  document.cookie = cookie_name += "=; expires=" + cookie_date.toGMTString();
}

function get_cookie ( cookie_name ) {
  var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' );
 
  if ( results )
    return ( unescape ( results[2] ) );
  else
    return null;
}