JS Using array on multiple pages

This site is best viewed in a modern browser with JavaScript enabled.

Xubu

Hello

I have a problem by accessing an array over 2 webpages. On page 1 i need the user to fill in text in a text box. After clicking a button the text must be stored in an array. On page 1 there is also a link to page 2. When page 2 opens after clicking the link i want to view the value off the array in a text area.

I have 2 functions written for this, i want to access the functions from a .js file so i can use them over multiple pages.

Code:

Page 1

Page2

file.js

var list = [];

function getText() {
var str = document.getElementById("txt");
list.push(str.value);
str.value = "";
str.focus();
}

function writetext() {
var area = document.getElementById("txtArea");
area.value = "";
for (var i = 0; i < list.length; i++) {
area.value += list + "\n";
}
}

Can someone tell me what the problem is?

Thanks

Sup3rkirby

If the two pages are going to be purely HTML (no PHP) then you'll probably want to use cookies or something like localStorage/sessionStorage. Cookies would be used if you expect people using the page to have an older browser that doesn't support localStorage or sessionStorage (IE7 and lower).

Even if you do use the storage API, you'll want to run a check to make sure it's supported and ideally you'd end up with something like:

function _RunThisBeforePageTwo() {
  if(sessionStorage != null) {
    sessionStorage.setItem("list", list);
  } else {
    // Set a cookie instead
  }
}
function _RunThisOnPageTwo() {
  if(sessionStorage != null) {
    list = sessionStorage.getItem("list");
  } else {
    // Load the cookie instead
  }
}

The first function would be run before the user goes to page 2 and would upset a sessionStorage variable to hold your array. I did leave out the code to set a cookie, but that's something that's relatively easy to find.

However I will mention that if you use a cookie the array will have to be stored as a string (likely separated by commas, unless of course the strings contain commas in which case you'll need to find an appropriate delimiter. Once stored as a string you would have to load it and use the split() method to turn it back into an array on the second page.

vwphillips

<html>
<head>
<title>vb</title>
<script type="text/javascript">



function getText(days) {   // the number of days to remember the array or if a string for the browser session
 days=(typeof(days)=='number'&&days>0)||typeof(days)=='string'?days:-1;
 getText.ary=days!=-1&&cookie('txt')?cookie('txt').split('~'):[];
 var str = document.getElementById("txt");
 getText.ary.push(str.value);
 str.value = "";
 str.focus();
 document.cookie='txt='+getText.ary.join('~')+(typeof(days)=='number'?';expires='+(new Date(new Date().getTime()+days*86400000).toGMTString())+';path/;':';');
}

function writetext() {
 var ary=cookie('txt')?cookie('txt').split('~'):[];
 document.getElementById("txtArea").value=ary[0]?ary.join('\n'):'';
 document.cookie='txt=;expires='+(new Date(new Date().getTime()-1).toGMTString())+';path/;'; // reset the cookie/array
}

function cookie(nme){
  var re=new RegExp(nme+'=[^;]+','i');
  return document.cookie.match(re)?document.cookie.match(re)[0].split("=")[1]:null;
 }

</script>
</head>
<body>
<input id="txt" type="text">
<br>
<input value="Click Me" onclick="getText(1);"
type="button">
<a href="fg.html">Klik dan hier !</a>
<br>
<br>
combining the two pages using the button in place of onload<br />
<input value="Write Text" onclick="writetext();"  type="button">
<textarea rows="5" id="txtArea"></textarea>
</body>
</html>