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!
Related
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'));
I have a simple form, need to store the values on sessionStorage after submit. Also need to show all the items from sessionStorage. To do that
import { StorageServiceModule} from 'angular-webstorage-service';
Want to create a service to use this StorageServiceModule of angular. How can I implement service using the SESSION_STORAGE. Any kind of documentation link or implementation example will be helpful.
Please follow the tutorial added by #Chellappan but if you want to store data into session then replace LOCAL_STORAGE to SESSION_STORAGE here like this:
constructor(#Inject(SESSION_STORAGE) private storage: WebStorageService) {
}
There is no much difference between localStorage and sessionStorage.The only difference is that local storage has no expiration set, we need to manually clear the values that are in localStorage. but in sessionStorage values gets cleared, when the page session ends.
for your question on store and retrieve data using session storage. please refer this link,
https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
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'));
Suppose I have one test booking page and user fill half data and then leave that page.Before leaving that page i want to store that data somewhere so that i will display that data in draft.
You can use Ajax to store data without submitting form.
Or
You can use browsers local storage to store data with the help of HTML5.
HTML local storage provides two objects for storing data on the client:
window.localStorage - stores data with no expiration date
window.sessionStorage - stores data for one session (data is lost
when the browser tab is closed)
Local Storage Object
The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
Example explained :
Create a localStorage name/value pair with name="lastname" and
value="Smith"
Retrieve the value of "lastname" and insert it into the element with
id="result"
The syntax for removing the "lastname" localStorage item is as follows:
localStorage.removeItem("lastname");
You can use localStorage in your case
The simple way to do this is to have a Save button that submits the partial request without Submitting it. On the server side, you just save the partially completed form in a database table ... and have your UI provide a way to reload the form when the user comes back.
If you use AJAX or similar, you are sending requests to the server. Whether you think of this as submitting "the form" or not is a matter of semantics.
If you want to store something in the user's web browser, take a look at the Web Storage API; e.g. https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
(I'm not saying this is a good idea ...)
No actually i want save that data if user close that wndow without submitting the form.
So either:
save periodically,
save in the window close event handler, or
ask the users if they want to close the window if there is data in the form.
I have the following situation: the user submits a form, I fetch the data from the server via an Ajax request and displays a chart. However, I want to give the user the option to display the data in the chart in table form or export as csv after he had submitted the form.
I was wondering what's the best solution to store the data, considering that I don't want the data to persist if the user opens a new window to submit the form again for example.
The application is in Rails.
Thanks.
You have a few options:
Cookies
LocalStorage
SessionStorage
More info: https://developer.mozilla.org/en/DOM/Storage
Non-standard:
window.name can store anywhere from 1mb up to 10mb depending on the browser. This is more of a hack, but is fairly stable. You would need to implement your own accessor/setter methods on this, where localStorage and sessionStorage have API's built in.
Personally i would recommend local storage if all your users browsers support it.
Its very simple to use and you can access it using these to methods.
localStorage.getItem("Itemkey");
localStorage.setItem("Itemkey","value");
localStorage.removeItem("ItemKey");
Its always a good way to go and this means you can assign each window a differnt local storage key and even remove the item when the window is closed, or unloaded !
For reference I found this very useful: http://diveintohtml5.info/storage.html
And combine it with storing JSON objects ( http://www.json.org/js.html ) and you have a very fast,simple and easy to use solution. OR even just store a string,array or what ever is required.