session storage and performance

Question

I have an object that contains data relative to the user's UI. For the moment, the data comes in the form of json, I run JSON.parse to evaluate the object and generate some HTML accordingly.

I'm thinking of storing the json string in the local session storage (not the local storage) and calling it each time the UI needs to be updated with new HTML. This way, if the user opens another page in the same browser, all the HTML of all the pages will be the same.

For now, the object is stored in memory and the interactions between the user's actions on the UI and the object's modifications run fast. If I serialize it and store in the session storage, will the browsers store the data in RAM or on the hard drive and slow down the page?

Answer 1

Taken from the html5 spec:

The lifetime of a browsing context can be unrelated to the lifetime of the actual user agent process itself, as the user agent may support resuming sessions after a restart.

Which means browsers may store this information to disk.

Performance will be up to browser specific and OS specific implementations. However, fetching this information is very unlikely to be a bottleneck.

Answer 2

I did this small test FF 32, Chrome 37, IE 11. Just for fun.

console.clear();
var s = new Date();
for(var i=0; i < 100000; i++)
{
  sessionStorage.item = i.toString();
}
var e = new Date();
console.log("session: " + (e - s) + " ms");

s = new Date();
var mem;
for(var i=0; i < 100000; i++)
{
  mem = i.toString();
}
e = new Date();
console.log("mem: " + (e - s) + " ms");

s = new Date();
for(var i=0; i < 100000; i++)
{
  localStorage.item = i.toString();
}
e = new Date();
console.log("local: " + (e - s) + " ms");
console.log('Done');

FF

• session: 830 ms
• mem: 92 ms
• local: 1156 ms

Chrome

• session: 2852 ms
• mem: 147 ms
• local: 2893 ms

IE

• session: 977 ms
• mem: 81 ms
• local: 15062 ms

After finishing test browser's window got frozen for few seconds and CPU + Disk activity increased (caused by localStorage).