Passing data from one web page to another

Asked 22/11, 2012 at 9:7 Answered 10/3, 2021 at 2:25

I need to pass a potentially large amount of data from one page to another using client side techniques. It is basically a list of id's which will get displayed on the target page. Obviously query string is not suitable as there could be thousands of ids so I thought I could use javascript to dynamically add a form (method=GET), write the ids into a hidden field and submit the form to the target page. It seems to work ok but I want to know if there is a better way of doing it - this feels a bit hacky.

Veridical answered 22/11, 2012 at 9:7 Comment(5)

You realize that a form with method GET when posted will just send the data s a query string anyway right? – Coralyn 22/11, 2012 at 9:10

is there any problem to send date like index.php?id1=v1&id2=v3&id3=v3...?? if not then I know a tricks... – Roadwork 22/11, 2012 at 9:15

@Coralyn - I didn't realise that. Does that mean I should use post or jquery.post() as suggested by Simon below? – Veridical 22/11, 2012 at 9:34

There are practical limits on URL length (and hence the data you can pass with GET), the lowest reported being around 2,000 characters, see https://mcmap.net/q/22567/-is-there-a-limit-to-the-length-of-a-get-request-duplicate – Preponderant 22/11, 2012 at 9:34

@HammerIp: Yes, POST sends the query params as HTTP content instead of part of the URL. – Coralyn 22/11, 2012 at 9:39

By using HTML5 Storage API you can achieve this...

With HTML5, web pages can store data locally within the user's browser.

Earlier, this was done with cookies. However, Web Storage is more secure and faster. The data is not included with every server request, but used ONLY when asked for. It is also possible to store large amounts of data, without affecting the website's performance.

The data is stored in key/value pairs, and a web page can only access data stored by itself.

localStorage - stores data with no expiration date
sessionStorage - stores data for one session

Example:

To set

window.localStorage.setItem("name",document.getElementById("name").value);

To get

var name = window.localStorage.getItem("name");

For more reference see HTML5 storage

Note: Web storage is supported in Internet Explorer 8+, Firefox, Opera, Chrome, and Safari.

Multiplicand answered 22/11, 2012 at 9:18 Comment(3)

Sorry, I should have specified that this is corporate environment and browser is IE7. Thanks anyway. – Veridical 22/11, 2012 at 9:30

@Talha, if sessionStorage is sufficient (lets you pass data between pages viewed in the same browser window), then consider using the polyfill code.google.com/p/sessionstorage which seems to make it work on IE 7. – Preponderant 22/11, 2012 at 10:6

will it work with a chromium client (i.e. Chromium Embedded Framework)? – Precursor 18/3, 2014 at 5:35

Thusends of IDs isn't so much. If the IDs are GUIDs there will be Nx32 bytes. You could use jQuery post, which will trigger a HTTP Post.

Ecstatic answered 22/11, 2012 at 9:11 Comment(2)

Just tested this and the data is passed to the page etc. but it doesn't load the target page in the browser. I need the target page to load and display some data based on the ids I pass in. Using http get works perfectly but I'm trying to avoid having a massive querystring containing thousands of ids. Is there a way to do this? – Veridical 22/11, 2012 at 10:3

Use a regular POST, skip the jQuery AJAX – Trilateral 22/11, 2012 at 14:53

If there's not TOO much data, you can also add a hash value to the end of the URL, and have the new page grab that value when it loads
https://developer.mozilla.org/en-US/docs/Web/API/URL/hash
Here's some code that demos this:

page-1.html

<html>
    <head>
        <meta charset="utf-8"/>
        <title>Page 1</title>
    </head>
    <body>
        <input id="txtMessage" type="text" value="Hello">
        <button id="btnSend">Send</button>
        <script>
            btnSend.onclick = () => {
                const message = txtMessage.value || "No message defined";
                window.location = "page-2.html#" + message;
            };
        </script>
    </body>
</html>

page-2.html

<html>
    <head>
        <meta charset="utf-8"/>
        <title>Page 2</title>
    </head>
    <body>
        <h2>The message is ...</h2>
        <p id="output"></p>
        <script>
            let message = location.hash;
            message = message.substring(1); // strip off leading #
            message = decodeURI(message); // get rid of %20 for spaces
            output.innerHTML = message;
        </script>
    </body>
</html>

Hodeida answered 10/3, 2021 at 2:25 Comment(1)

Max length of URI - #417642 – Hodeida 10/3, 2021 at 2:32

Recommended topics

Hot tags