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'));
Related
What's the best method of storing a users ID in ReactJS, so that all components have access to it?
I've looked into Redux and Context, but they seem massively overkill for just storing an ID (or maybe I'm missing something?). I've also looked at storing the ID in the parent component (App), but page refreshes lose the id :(.
Session storage would probably best suit your needs
The sessionStorage property allows you to access a session Storage object for the current origin. sessionStorage is similar to localStorage; the only difference is while data stored in localStorage has no expiration time, data stored in sessionStorage gets cleared when the page session ends.
https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
You can then set/get the ID when you need to
sessionStorage.setItem('userID', 'value');
const USER_ID = sessionStorage.getItem('userID');
However, to keep the ID even after a page close you would need to use localStorage
The read-only localStorage property allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions. localStorage is similar to sessionStorage, except that while data stored in localStorage has no expiration time, data stored in sessionStorage gets cleared when the page session ends — that is, when the page is closed.
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
localStorage.setItem('userID', 'value');
const USER_ID = localStorage.getItem('userID');
If you want your data to be available even after closing and reopening the browser, LocalStorage is the appropriate place to store it; Otherwise SessionStorage keeps your data as long as the browser is open.
Keeping such sensitive data as a user id in storage is a bad bad idea!
You need to fetch this data every time the user hard-refreshes his/her browser. Do not use storage for such savings!
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.
I've a popup to enter the data and once the data is added, I need to show data in parent page Gridview. But that data don't need to be stored until I click the save button below the Gridview in the parent page. It will still be displayed and maintained on the screen - (like it has active/inactive button).
When I click the save below the gridview, it will be stored in the database all at once. I need to do this using javascript. How can I do that?
I'm working on asp.net web project.
You can save your data temporarily using localStorage instead of your database for instance:
localStorage.setItem('myDataName', 'myDataValue') // Save data
And:
localStorage.getItem('myDataName') // Get data
This works for strings. If you want to save objects or arrays of objects, you must convert them to strings like this:
localStorage.setItem('myDataName', JSON.stringify(myObject)) // Save object
Take a look at LocalStorage
The localStorage property allows you to access a local Storage object.
localStorage is similar to sessionStorage. The only difference is
that, while data stored in localStorage has no expiration time, data
stored in sessionStorage gets cleared when the browsing session
ends—that is, when the browser is closed.
It should be noted that data stored in either localStorage or
sessionStorage is specific to the protocol of the page.
Store Data
localStorage.setItem('Key', 'YOUR_DATA');
Read Data
var YOUR_DATA = localStorage.getItem('Key');
You can also store objects by stringifying it.
localStorage.setItem('Key', JSON.stringify(YOUR_DATA_OBJ));
when reading parse to object
var YOUR_DATA_OBJ = JSON.parse(localStorage.getItem('Key'));
I am trying to save my current js object in history.
history.pushState($(this)[0],'List',window.location.href);
But i am getting error
DataCloneError: The object could not be cloned. history.pushState($(this)[0],'List',window.location.href);
https://developer.mozilla.org/en-US/docs/Web/API/History_API
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.
So you are serializing with JSON.stringify for data.
history.pushState(JSON.stringify($(this)[0]),'List',window.location.href);
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' }));