Recovering data from a joined string

Recovering data from a joined string

I have a "canvas" div full of HTML, where 'canvas' here has nothing to do with an html 'canvas'.  I want pack up  everything relevant to div#canvas and store it as a single file, and then later read the file back and restore div#canvas as it was.

I pack up the canvas styles with

  1. canvas$ = $('#canvas');  // the local canvas being saved

  3. var canvas_margin_top     = canvas$.css('margin-top');
  4. var canvas_margin_bottom     = canvas$.css('margin-bottom');
  5. var canvas_margin_left     = canvas$.width()/2 + 'px';  
  6. var canvas_width       = canvas$.css('width');
  7. var canvas_height             = canvas$.css('height');  
  8. var canvas_background_color         = canvas$.css('background-color');

  10. // Now turn this into one continuous string in 'canvasStyle'

  12.  canvasStyle = [' \n',
  13.        ' position: absolute;\n', 
  14.        ' left:50%;\n',
  15.        ' margin-top:' + canvas_margin_top + ';\n',
  16.        ' margin-bottom: ' + canvas_margin_bottom + ';\n', 
  17.        ' margin-left:' + canvas_margin_left + ';\n', 
  18.        ' width:' + canvas_width + ';\n',
  19.        ' height : ' + canvas_height + ';\n', 
  20.        ' background-color: ' + canvas_background_color + ';\n'
  21.        ].join('');

After line 21 I have one long string with all the canvas style information.  

This works fine except that when I read the canvasStyle string back it's not clear to me the best way to pull the individual styles back out of the string, so I can, for example, execute something like 

  1. canvas$.css('height', canvas_height);  

to apply the saved styles back to a fresh canvas, where canvas_height is the value I pulled initially on line 7 from the canvas I'm saving.

Is it clear to someone the best way to do this?

Thanks for any ideas.