I can't find the way to send the value of an Array to another page using Javascript and HTML

Question

as far as I know I can send data to another page but I don't know how...I don't want to use frameworks or libraries like jQuery. I just want to use Javascript, HTML5 and CSS3.

Here is my code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" lang="es-es">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/menu.css" type="text/css" media="screen">
<title>Read and Parse Lynis Log</title>

<script>

function processFiles(files) {
var file = files[0];
var reader = new FileReader();
var textParsed = [];

reader.onload = function (e) {
    var output = document.getElementById("fileOutput");
    output.textContent = e.target.result;

    var text = e.target.result;
    var lines = text.split("\n");

    for (i=0; i<lines.length; i++) {      
        textParsed[i] = lines[i];
        console.log(textParsed[i]); 
    } 
};
reader.readAsText(file);
}
</script>
</head>

<body>
<input id="fileInput" placeholder=":input" type="file" size="50" onchange="processFiles(this.files)">
<div id="fileOutput"></div>
    <div class="container">
            <ul id="nav">
                <li><a href="#"><img src="images/t1.png" /> Dashboard</a></li>
                <li><a href="#" class="sub" tabindex="1"><img src="images/t2.png" />Reporting</a><img src="images/up.gif" alt="" />
                    <ul>
                        <li><a href="#"><img src="images/empty.gif" />LYNIS LOG</a></li>
                        <li><a href="#"><img src="images/empty.gif" />LYNIS REPORT</a></li>
                    </ul>
                </li>
                <li><a href="#" class="sub" tabindex="1"><img src="images/t3.png" />Lynis Tests</a><img src="images/up.gif" alt="" />
                    <ul>
                        <li><a href="#"><img src="images/empty.gif" />Accounting</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Authentication</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Banner</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Boot</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Crypto</a></li>
                        <li><a href="#"><img src="images/empty.gif" />File Integrity</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Firewall</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Hardening</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Kernel</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Logging</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Mail</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Malware</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Nameservers</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Networking</a></li>
                        <li><a href="#"><img src="images/empty.gif" />PHP</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Printing</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Processes</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Shell</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Software</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Squid</a></li>
                        <li><a href="#"><img src="images/empty.gif" />SSH</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Storage</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Time</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Tooling</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Web</a></li>
                    </ul>
                </li>
                <li><a href="#"><img src="images/t2.png" />Overview</a></li>
            </ul>
        </div>
</body>
</html>

You can see more details about the code in the following fiddle

As you can see, when the user selects a text file, the content is stored in the array: var textParsed = [];

Then, my question is: if I want to send the array to another page in the menu and use it again as a variable, for example: var textParsed2, how can I do it? The communication must be client-side!

Define "send data to another page". Do you want to share data among different tabs? Do you want to send the data to your server with AJAX? — Oriol, Apr 11 '16 at 17:40
To send information, you either need to post it (but you need server side script), or you need to set cookies, use local storage, or send the information in an url. Anyway, you need a way to transfer this information. Everything that is on the page itself is lost and forgotten before the new page is loaded. — GolezTrol, Apr 11 '16 at 17:42
I would consider using URL as a way to send data. For example, if your array is `[1, 2, 3]`, the URL would be `mynewpage.com/page-url/#1-2-3` where hashtag defines array separated by `-`. Then you can scrape the array with JavaScript. — Karolis Ramanauskas, Apr 11 '16 at 17:42
@KarolisRamanauskas What if some array item is a string which contains a dash? Better use JSON instead. — Oriol, Apr 11 '16 at 17:43
@GolezTrol true, that would probably make it easier to work with existing abstractions for GET requests. — Karolis Ramanauskas, Apr 11 '16 at 17:44
@Oriol Just send the content of a variable to another .html page without using internet connection, everything in a local environment. — , Apr 11 '16 at 17:44
You can either serialize it and pass it through the URL using encodeURIComponent(arrayName), and then decode it on the other end using decodeUIRComponent(encodedValue), or you can do a proper cross domain communication using CORS/CSRF/whatever security you need to worry. — oooyaya, Apr 11 '16 at 17:44
@Oriol agreed, just a suggestion to the OP, the question is too vague but for simple data structures, that would work. — Karolis Ramanauskas, Apr 11 '16 at 17:44
@GolezTrol Unfortunately I can't use internet, only local environment. — , Apr 11 '16 at 17:45
If you want different tabs to communicate client-side, there is the [Broadcast Channel API](https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API). But currently only Firefox supports it. — Oriol, Apr 11 '16 at 17:45
@Gera, that doesn't matter. At least some of those techniques should work. At least the url part. Although I wonder why you would not use a propert hosting environment for a web page.. — GolezTrol, Apr 11 '16 at 17:47
@Gera you are describing a single page application, why not use a single page application framework. See AngularJs. — Max Sorin, Apr 11 '16 at 17:48
@KarolisRamanauskas The array is too big for that...it's a log file so you can imagine how long is the file... — , Apr 11 '16 at 17:48
@Oriol This is exactly what I want, send the content of a variable to another .html page without using internet, but I want to send all the info once I click the link of the html page on the left menu. I don't need complex systems or something sophisticated. — , Apr 11 '16 at 17:51
@Gera Given your limitations, from what I can tell, creating single app application, as Max said might be the only 'clean' solution here. In this way, you do not have to open new pages at all. — Karolis Ramanauskas, Apr 11 '16 at 17:52
@oooyaya Can you provide an example of how serialize an array and pass it? Looks interesting. — , Apr 11 '16 at 17:52
@KarolisRamanauskas Do you have any example? I never used AngularJs as Max suggested... — , Apr 11 '16 at 17:56
@Gera I don't have any specific examples. You would need familiarity with AngularJS, Backbone, Ember or any other JavaScript MVC framework that would make this task easier. This is a whole architectural change to your application and probably is not the 'solution' you are looking forward. Unfortunately, with your current constraints, I personally can't see a straightforward solution other than workarounds like cookies, URL and so on. — Karolis Ramanauskas, Apr 11 '16 at 18:18

score 0 · Accepted Answer · answered Apr 11 '16 at 20:26

Maybe try storing your array as a JSON. Take advantage of the JSON.stringify() and JSON.parse(). This will allow you to store your array in a javascript session or "localStorage"

    var foo = [];
    contacts[0] = "Roseanne Barr;
    localStorage.setItem("contacts", JSON.stringify(contacts));

    //recall your stored values in a var
    var storedContacts = JSON.parse(localStorage.getItem("contacts"));

score 0 · Answer 2 · edited May 23 '17 at 11:45

I would suggest using query strings in the url. Its quite easy.

https://en.wikipedia.org/wiki/Query_string

How can I get query string values in JavaScript?

You can get query strings of url using window.location.search. For example, a URL like: https://stackoverflow.com/?textParsed=some+awesome+text

function getQuery(name){
   if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(window.location.search))
        return decodeURIComponent(name[1]);
}

var textParsed = getQuery("textParsed");
alert(textParsed);

If not, you can try the html5 local storage:

http://www.w3schools.com/html/html5_webstorage.asp

// Store
localStorage.setItem("textParsed", "some awesome text");
// Retrieve
localStorage.getItem("textParsed");

If you are not sure your user uses a "new" browser, you could use a combination of query strings and local storage.

example:

if(typeof(Storage) !== "undefined") {
    // Code for localStorage/sessionStorage.
} else {
    // Code for QueryStrings
}

I can't find the way to send the value of an Array to another page using Javascript and HTML

2 Answers2