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
Related
So, I have a PHP file that runs an SQL(MySql) query and gets the result. I need that page to send that result to another page automatically(I can use PHP in the receiving page). However, I want to make my website accessible to privacy-sensitive people who disable cookies and javascript on their browsers. I'm not using any PHP frameworks.
An initial page that runs the query only runs in the backend like a controller so it does not have any HTML in it. This means I cannot use a hidden form and make the user submit it with a button. I thought about sessions but they need cookies to work and JSON needs javascript. I thought about sending the data in the URL but the query result is quite big and I was afraid it could exceed some kind of URL length limits(if such thing exists). Is there a way to achieve this reliably?
EDIT: To clarify some things, the data I am sending is a search result so the query changes depending on the users input(which was provided to the page which runs the query with a form).
Store data somewhere and send id or something through query string and access data from database through that id from query string. Sending too much data is not advisable through cookies, session or even query string just pass your unique id and grab data from db.
Happy coding.
I have two html files, and the task for us is to pass data between the two. Then I came up with the idea of sending the data through the URL using the hash, and parsing this link something like JSON.parse(window.location.hash.slice(1)); and assigning it to a local variable. It seems to work for the couple try. But when I populated my JS files with codes error occurs. Can you tell what alternative can I do.? Here's the console errors. I'm using jquery by the way ..
The Console Error
Thank you!
JSON contains a number of characters that are not legal in urls.
A simple way around this could be to simply encode the JSON data using Base64.
You can use the latest way of accessing the data from one page to another:
//1st page
storage["key"]=data;
//2nd page
var value= storage["key"];
I think jQuery.param is what you need it converts a Json into a URL String
http://www.sourcecodemart.com/convert-json-object-to-url-query-string/
This won't work in the long run. urls are limited to about 2000 characters. What is the maximum length of a URL in different browsers?
You have to base64 encode the json to have it live in the URL. This eats up a lot of the available characters.
You don't get the same limitations when doing POST requests but a HTML page can't access post requests.
You might want to look at postMessage and embedding one page in the other in an iframe to do cross communication.
Also if the urls are on the same domain, just use local or session storage.
I have a function in javascript that is generating an array of canvas elements (screenshots of the current webpage). If the user clicked on a new link, I want to save my current array and somehow send it to the new page where I will call the function again, but with the array already filled by the previous values, through the same javascript file (I want it all to remain client side).
This was for context. So my question is, can I send data to pages sharing the same domain, client side? Is there some way I can store the information maybe, and then access it later, without going server side?
If you want to share these 'canvases' between tabs/websites then you should remember that inside localstorage or cookies you can only store STRINGS. You cannot store canvas as a string (you would get something like "[object HTMLCanvasElement]" which is nonsense in this case, but you can convert them to images and then convert images to strings, which you can then store inside localstorage or cookies.
Is it possible to copy values from a form on page x to a form on page y using javascript. The data is the same but just different pages and different applications?
Yes, you can do this. Using AngularJS you could use "search" variables and then plug these into the form. Using normal javascript you may be able to use a # with the data. Using PHP + normal javascript (more secure) you can send a POST to the page (which is a PHP page) and have the page, if the POST params with your values exist, put a javascript fragment on the page setting the values of the form when the page is done loading.
Cookies are also always an option :)
[EDIT]
After discussion, here is the solution to the question: GitHub
Actually, cross-tab JS is not allowed. I am not sure about bleeding-edge apis.
Theoretically, it is possible to do via local storage with a same-origin restriction. But you'd better don't mind this option.
Also, try to play with cookies.
Try something like this:
window.onload = function() {
var myValues;
if (document.cookie) {
// get your values onLoad
myValues = document.cookie;
} else {
// set your values
myValues = "..." // your values
document.cookie = myValues;
}
}
If it's just from one page to another you can append the data to the request as POST (with PHP) variables, or a simple query string (GET) and read them once the page has loaded/populate relevant fields - if the second page is loaded directly from the first.
If it needs to be retained until an unspecified time (when the user may have gone to other pages in the interim) you could look into using cookies.
how to get GET and POST variables with JQuery?
ASP .NET is allowed
Storing the values in hidden input fields is allowed
Query String is not allowed
POST request is not allowed
It is possible to store JS variables between GET requests ?
I want to reinitialize them on the client using ClientScript.RegisterStartupScript
Can I use cookies for this ?
Are there other posibilities?
Where cookies are stored when Request is made ?
Can I use cookies for this ?
Yes, see this tutorial on using cookies in Javascript.
Are there other posibilities?
If you are not allowed to append anything the URL of your requests, I can't come up with any.
Where cookies are stored when Request is made ?
In the HTTP request header. The aforementioned tutorial will tell you how to read their values from Javascript. On the server side with ASP.Net, you can read cookie values using Request.Cookie["cookieName"] which returns an instance of HttpCookie.
I wouldn't highly recommend this, but the other option is to alter the window.name property.
You can save some minor bits of data here, then retrieve them on the next page load.
Pros:
Quick-n-dirty, but works
Cons:
Messes up any window references for popups/child iframes
Since its a "hack", browser vendors may break this "feature" in the future
Of course if you can exclude all the old browsers, then use Global/Client Session Storage!
At the moment using cookies is your best bet. You can serialize the JavaScript objects to strings, and unserialize them back into objects later. A good choice format is JSON, since it is a subset of JavaScript.
There is also storing objects in Flash.
Storing in Google Gears.
DomStorage
See this library that has an interface to each:
http://pablotron.org/?cid=1557
If you are in control of all aspects of the page, then you can also wrap the page in a top level frame. Then only refresh the child frame. You can then store content in the parent frame.
You can see this used in sites like GMail, and others where the only thing that changes in the URL is outside the #.
You don't even have to change the URL, that part is just put in for Human Friendly URLs. (So you can actually copy and paste URLs as is).