looking for ways to store large js object in sessionStorage

Question

I am trying to build a solution to allow my single page app to survive a user hitting refresh. Currentlyly I have a large model object that I am storing in the DOM and as the user works with the app I add and delete information from the model object. based on reading other posts I started working with the following:

function snapshotModel(){
    var tempModel = JSON.stringify(modelLocator);
    sessionStorage.setItem('model', tempModel); 
    console.log('updated model snapshot');
}

function getTempModel(){
    if (sessionStorage.model && sessionStorage.model.length > 0){
        var tempModel = sessionStorage.getItem('model');
        modelLocator = $.parseJSON(tempModel);
    } else {}   
}

this works great once the user is logged in I take a snapshot of the modelLocator and keep doing this every 5 - 10 minutes. However once the user starts working with the app (editing their user info or working with a order transaction) I max out the value limit in Chrome. When testing I found chrome can take 120666 characters. mid way through a transaction, I hit about 196475 characters. So as you can see my modelLocator gets truncated, and we cant reload the string as JSON when the user hits refresh.

Does anone have suggestions on how I can store my model? some areas the model is name value pairs other sections its 6 lever deep objects.

thanks for any assistance.

Answer 1

found issue is the the browsers dev tool truncates the value using console.log gives me the real value in sessionStorage