Question

Here is my fiddle: jsfiddle.net/XR8EZ

I cannot get the save data to load after clicking the load button. Can anyone help me here?

Sorry for the length =D

Answer 1

The load routine is wrong.
You save all your datas (stringifyed) with setItem(‘serializedObj’).
Then you retrieve value with “retrievedItem = localStorage.getItem(‘serializedObj’);” but not save the value of “JSON.parse(retrievedItem);”.
Then you try to retrieve values directly by localStorage.getItem(imgName);

You retrive and save data parded:

dataparsed = JSON.parse(retrievedItem);

Then you must use this value for retrieving values:

//Reconstruct the original image array
for (i=0;i<totalState.length;i++) {                        
  var thisParseImgVal = dataparsed.imgName;    
  totalImage[i] = JSON.parse(thisParseImgVal);
}

You have to correct you save/load code, I suggest you to save you data as array:

var imgVal = JSON.stringify(totalImage);                        
var shpVal = JSON.stringify(totalShape);
var hLval = JSON.stringify(totalHighlight);
var str = {imgName:imgVal,shpName:shpVal,hLname:hLval}; //Store

So you must read it as:

totalImage[i] = JSON.parse(thisParseImgVal[i]);