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'));
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'));
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!
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 want to send some data from one HTML page to another. I am sending the data through the query parameters like http://localhost/project/index.html?status=exist. The problem with this method is that data remains in the URL. Is there any other method to send the data across HTML pages using JavaScript or jquery.
why don't you store your values in HTML5 storage objects such as sessionStorage or localStorage, visit HTML5 Storage Doc to get more details. Using this you can store intermediate values temporarily/permanently locally and then access your values later.
To store values for a session:
sessionStorage.setItem('label', 'value')
sessionStorage.getItem('label')
or more permanently:
localStorage.setItem('label', 'value')
localStorage.getItem('label')
So you can store (temporarily) form data between multiple pages using HTML5 storage objects which you can even retain after reload..
I know this is an old post, but figured I'd share my two cents. #Neji is correct in that you can use sessionStorage.getItem('label'), and sessionStorage.setItem('label', 'value') (although he had the setItem parameters backwards, not a big deal). I much more prefer the following, I think it's more succinct:
var val = sessionStorage.myValue
in place of getItem and
sessionStorage.myValue = 'value'
in place of setItem.
Also, it should be noted that in order to store JavaScript objects, they must be stringified to set them, and parsed to get them, like so:
sessionStorage.myObject = JSON.stringify(myObject); //will set object to the stringified myObject
var myObject = JSON.parse(sessionStorage.myObject); //will parse JSON string back to object
The reason is that sessionStorage stores everything as a string, so if you just say sessionStorage.object = myObject all you get is [object Object], which doesn't help you too much.
possibly if you want to just transfer data to be used by JavaScript then you can use Hash Tags
like this
http://localhost/project/index.html#exist
so once when you are done retriving the data show the message and change the
window.location.hash to a suitable value.. now whenever you ll refresh the page the hashtag wont be present
NOTE: when you will use this instead ot query strings the data being sent cannot be retrived/read by the server
Well, you can actually send data via JavaScript - but you should know that this is the #1 exploit source in web pages as it's XSS :)
I personally would suggest to use an HTML formular instead and modify the javascript data on the server side.
But if you want to share between two pages (I assume they are not both on localhost, because that won't make sense to share between two both-backend-driven pages) you will need to specify the CORS headers to allow the browser to send data to the whitelisted domains.
These two links might help you, it shows the example via Node backend, but you get the point how it works:
Link 1
And, of course, the CORS spec:
Link 2
~Cheers
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' }));