Develop Reference

unable to store object in session Storage

In this image you can see I am getting an array of objects and at Zero position I am getting some objects Now my task is to store these objects in sessionStorage.
sessionStorage.setItem("mytime",JSON.stringify(data[0]));
When I am checking in sessionStorageis showing an Empty object.

There is a difference b/w sessionStorage and localStorage.
The sessionStorage is available only for that particular session i.e if a browser is reloaded, you will no longer be able to access the data. However, localStorage is persistent and will be available until you explicitly remove it.
If the value is empty, you need to check the value of data[0].
localStorage.setItem('mytest', 'Check the local storage console');
console.log(localStorage.getItem('mytest'));

Adding custom properties the Document Object in front-end javascript

Is it ok to add custom properties the Document Object in front-end javascript?
Suppose I want to store some parameters, but I can't do so in the URL. Can I create a new property on the Document Object to store the parameters? For example, if my parameter is 'someImportantInfo', can I set:
document.someImportantInfo = 'thisIsSecretInfo';
So that when a user goes new page, I can retrieve the contents of the 'someImportantInfo' property in my front-end Javascript, and do something with 'thisIsSecretInfo'?

The best way to do that is not in the document Object.
When you load a new page, the document Object will be replaced by another one.
To store information between different pages you can use the localStorage or sessionStorage:
When you need to save some value:
localStorage.setItem("someImportantInfo","thisIsSecretInfo");
And when you need to get this value in other page:
localStorage.getItem("someImportantInfo");
See some examples in: https://www.w3schools.com/html/html5_webstorage.asp
If you want to store information only during a session (cleared when the browser is closed), use sessionStorage instead.
Also, you can use cookies, but it's more tricky because you don't have a native function to save and retrieve cookies.

Can we store files in Chrome Storage, instead of strings

I could read in the Chrome storage API page that we can store string values inside Chrome storage against keys. Is there any way to store files against keys inside Chrome storage?

chrome.storage stores data as the JSON stringification of the values which it's given to store. So, yes, if you convert your file(s) into a form that can be converted to JSON (e.g. by JSON.stringify()), then the contents of the file can be stored. If the value that you are trying to store in chrome.storage can not be converted to JSON, then it can't be stored (e.g. DOM elements). chrome.storage does not inherently care what the data represents, only that it can be JSON stringified.
If you're asking, as stated in your comment, if it's a good idea to store thousands of different "files" totaling more than 5GB in chrome.storage, then the answer is: "NO!".
If you are looking for alternatives, then some are provided in Can you use HTML5 local storage to store a file? If not, how?

Failed to execute 'pushState' on 'History' error when using window.history.pushState function

I'm using window.history in JavascriptMVC application to enable back/forward/refresh functionality for each controller. Every time I load a new controller I'm using window.history.pushState to add a new state to history. And then on back/refresh I'm using the saved state and reuse the data to build the controller again.
The whole idea works fine excepting one issue on specific scenario. I'm getting the following error:
Failed to execute 'pushState' on 'History': An object could not be
cloned.
The same data is added without problem on other scenario. What can cause this error?
Thanks for the assistance.

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
"The state object can be anything that can be serialized. Because Firefox saves state objects to the user's disk so they can be restored after the user restarts the browser, we impose a size limit of 640k characters on the serialized representation of a state object. If you pass a state object whose serialized representation is larger than this to pushState(), the method will throw an exception. If you need more space than this, you're encouraged to use sessionStorage and/or localStorage."
Looks like the simple answer is that possible the state you are passing in is serializing to larger than 640k. I just ran into this bug, and I am almost certain that is the cause.

window.history.pushState string size limit of 640k characters.
Better switch to localStorage or sessionStorage.
Source: https://developer.mozilla.org/en-US/docs/Web/API/History/pushState

Try to pass the object in a queryParams:
this.router.navigate(['yourRoute'], { queryParams: objectToPass});
That works for me.

Local storage and JSON

Where are the data stored in local storage? Is it in form of some text or ASCII format or some other? Is it possible to store JSON data in text files (which can be regularly) updated and retrieve them back? I want to store some JSON data but since my requirement is not so big, I want to abstain from using a database for now.

Local storage can only store strings (any data you might have, have to be converted to string upon saving in storage and "revived" upon reading from it).
JSON data is more than fine to be stored as a string so it is good choice of format for keeping complex data in browser storage (either local storage or session storage).
You can learn more about storage here: http://diveintohtml5.info/storage.html
As to where the data is being stored, I imagine it varies from browser to browser but you don't have to worry about where is the data, since you don't have any direct access to it (only through storage API).
Edit: Quick note - I've found this article stating where is storage data stored by Firefox - https://developer.mozilla.org/en/DOM/Storage (see section "Storage location and clearing the data" at the bottom of the page).

I wrote a tiny script to allow storage, and reading of arrays, strings, and objects into local storage. IT even lets you modify nested keys within the objects you store. Here is a link to the tiny script. https://github.com/andresgallo/truStorage/blob/master/truStorage.js

Getting:
const got = JSON.parse(localStorage.getItem('my-key'));
Setting:
localStorage.setItem('my-key', JSON.stringify({ a: 'A' }));