2016-04-11 2 views
-3

Насколько я знаю, я могу отправлять данные на другую страницу, но я не знаю, как ... Я не знаю, как хотите использовать фреймворки или библиотеки, такие как jQuery. Я просто хочу использовать Javascript, HTML5 и CSS3.Я не могу найти способ отправить значение массива на другую страницу, используя Javascript и HTML

Вот мой код:

<!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> 

Вы можете посмотреть более подробную информацию о коде в следующем fiddle

Как вы можете видеть, когда пользователь выбирает текстовый файл, содержимое хранится в массив: var textParsed = [];

Тогда мой вопрос: если я хочу отправить массив на другую страницу в меню и использовать его снова как переменную, например: var textParsed2, как я могу это сделать? Сообщение должно быть на стороне клиента!

+0

Define "отправить данные на другой странице". Вы хотите делиться данными между различными вкладками? Вы хотите отправить данные на свой сервер с помощью AJAX? – Oriol

+0

Для отправки информации вам необходимо либо отправить ее (но вам нужен сценарий на стороне сервера), либо вам нужно установить файлы cookie, использовать локальное хранилище или отправить информацию в URL-адрес. Во всяком случае, вам нужен способ передачи этой информации. Все, что находится на самой странице, теряется и забывается до загрузки новой страницы. – GolezTrol

+0

Я хотел бы использовать URL как способ отправки данных. Например, если ваш массив «[1, 2, 3]», URL-адрес будет «mynewpage.com/page-url/# 1-2-3», где hashtag определяет массив, разделенный символом '-'. Затем вы можете очистить массив с помощью JavaScript. –

ответ

0

Возможно, попробуйте сохранить ваш массив как JSON. Воспользуйтесь преимуществами JSON.stringify() и JSON.parse(). Это позволит вам хранить массив в яваскрипте сессии или «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")); 
0

Я предложил бы использовать строки запроса в URL. Это довольно легко.

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

How can I get query string values in JavaScript?

Вы можете получить строки запроса из URL с помощью window.location.search. Например, URL, как: 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); 

Если нет, то вы можете попробовать html5 локальное хранилище:

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

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

Если вы не уверены, что ваш пользователь использует "новый" браузера, вы можете использовать комбинацию строк запроса и локального хранилища.

пример:

if(typeof(Storage) !== "undefined") { 
    // Code for localStorage/sessionStorage. 
} else { 
    // Code for QueryStrings 
} 
Смежные вопросы