Question

I’m doing a project that involves placing a shape onto a canvas and saving its state to be viewed in another session. Since the shape’s color and location are not a part of the source HTML nor are they provided by a form, how can i save it? I’ve tried storing the shape’s data inside an object and then an array, but i dont know how to retrieve this information in another session. Here is the code for the shape:

var shapeState = { //Example of a shape being recorded
                            number:increment,
                            id:thisCanvas,
                            type:'shape',
                            kind:shapeKind,
                            cheight:canvasHeight,
                            cwidth:canvasWidth,
                            height:shapeHeight,
                            width:shapeWidth,
                            color:shapeColor,
                            x:xPos,
                            y:yPos
                        }

                        totalState.push(shapeState); //State of shape data has been stored in global array

Can anyone help? The fiddle for the entire project is here: http://jsfiddle.net/RymyY/5/

Answer 1

Modern browsers support the web storage API; for older ones, you’d use cookies. jQuery has a number of storage plugins that abstract away the specific storage mechanism.