8

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.

Mohammed H
  • 6,880
  • 16
  • 81
  • 127
HammerIp
  • 211
  • 1
  • 2
  • 11
  • 2
    You realize that a form with method GET when posted will just send the data s a query string anyway right? – slebetman Nov 22 '12 at 09:10
  • is there any problem to send date like `index.php?id1=v1&id2=v3&id3=v3`...?? if not then I know a tricks... – Naz Nov 22 '12 at 09:15
  • @slebetman - I didn't realise that. Does that mean I should use post or jquery.post() as suggested by Simon below? – HammerIp Nov 22 '12 at 09: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 http://stackoverflow.com/questions/266322/http-uri-get-limit – Jukka K. Korpela Nov 22 '12 at 09:34
  • 1
    @HammerIp: Yes, POST sends the query params as HTTP content instead of part of the URL. – slebetman Nov 22 '12 at 09:39

3 Answers3

10

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.

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Talha
  • 18,898
  • 8
  • 49
  • 66
  • Sorry, I should have specified that this is corporate environment and browser is IE7. Thanks anyway. – HammerIp Nov 22 '12 at 09:30
  • @Talha, if `sessionStorage` is sufficient (lets you pass data between pages viewed in the same browser window), then consider using the polyfill http://code.google.com/p/sessionstorage/ which seems to make it work on IE 7. – Jukka K. Korpela Nov 22 '12 at 10:06
  • will it work with a chromium client (i.e. Chromium Embedded Framework)? – Abdul Rehman Mar 18 '14 at 05:35
1

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.

Simon Edström
  • 6,461
  • 7
  • 32
  • 52
  • 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? – HammerIp Nov 22 '12 at 10:03
  • Use a regular POST, skip the jQuery AJAX – Simon Edström Nov 22 '12 at 14:53
1

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>
tonethar
  • 2,112
  • 26
  • 33
  • Max length of URI - https://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url-in-different-browsers – tonethar Mar 10 '21 at 02:32