CODEWITHSUNDEEP
javascriptclient-side
HammerIp
HammerIp

Reputation: 211

Passing data from one web page to another

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.

Upvotes: 8

Views: 21339

Answers (3)

tonethar
tonethar

Reputation: 2282

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>

Upvotes: 1

Talha
Talha

Reputation: 19282

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.

Upvotes: 10

Simon Edstr&#246;m
Simon Edstr&#246;m

Reputation: 6619

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.

Upvotes: 1

Related Questions