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

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

Safari (different device)

• session: 380 ms
• mem: 21 ms
• local: 248 ms

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