How to add items to javascript array that can be accessed on another page?

Question

I have a problem. I have created a php website and with every item there is a "request a quote" button. on clicking the button, i want the item name to be added to an array (which i am doing through Javascript).subsequently, the array is to be added to the request form "message" field on contact.php. i have used this -

<script language="javascript">
// Empty array
var empty = [];

// Array containing initial elements.
var arrayitem= ['hello'];

alert(arrayitem[1]);
function myFunction(item) {
arrayitem.push(item);
var Items='';
for (var i = 0; i < arrayitem.length; i++) {
Items=Items+','+(arrayitem[i]);
   alert(Items);

};
document.getElementById("message").value=arrayitem[1];
}
</script>

on header.php page, which i include on every page. I have two more pages- 1. computers.php- that contains computers as items and 2. softwares.png- that contains softwares as items.

Now the problem is, when i add items from one page, they are appended to the array and it works fine, but when i navigate to another page, the items added from previous page get removed from the array ..and moreover i cant see the araay items in the "message field of contactus.php.".please help

Hayko Koryun · Accepted Answer · 2013-04-18 11:46:42Z

1

You could try using the browser's localStorage to store data in between page visits.

Try this JavaScript in your header.php:

localStorage.setItem("preference", "10");

And then in your contact page try this:

console.log(localStorage.getItem("preference"));

You should see "10" in your browser console.

Here's more info about localStorage: http://diveintohtml5.info/storage.html

answered Apr 18, 2013 at 11:46

Hayko Koryun

1,2543 gold badges13 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mathijs Flietstra · Accepted Answer · 2013-04-18 21:34:49Z

JavaScript is a client side scripting language, it is not designed to persist variable values between page requests. If you want to access JavaScript variables on another page you will have to pass them along with the request for the new page, so that the new page can reinstate them.

Besides posting it to the next page along with the request, in newer browsers you can use localStorage:

// Store the array
var array = [1, 2, 3];
localStorage['array'] = JSON.stringify(array);

// Retrieve the array
var storedArray = JSON.parse(localStorage['array']);

In older and newer browsers you can use cookies:

// Store the array in a cookie
var array = [1, 2, 3];
var jsonArray = JSON.stringify(array);
setCookie('mycookie', jsonArray , 1);

function setCookie(name, value, days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = '; expires='+date.toGMTString();
  }
  else var expires = '';
  document.cookie = name+'='+value+expires+'; path=/';
}

// Retrieve the array from a cookie
var jsonArrayFrom Cookie = JSON.parse(getCookie('mycookie'));

function getCookie(name) {
  name += '=';
  var cookies = document.cookie.split(';');
  for(var i=0;i < cookies.length;i++) {
    var cookie = cookies[i];
    while (cookie.charAt(0)==' ') cookie = cookie.substring(1, cookie.length);
    if (cookie.indexOf(name) == 0) return cookie.substring(name.length, cookie.length);
  }
  return null;
}

is there any other way out to do this.. i am not using any database.

reverendocabron · Accepted Answer · 2013-04-18 11:44:05Z

0

Try to use cookies on javascript and then retrieve it on PHP with $_COOKIE var.

http://www.php.net/manual/en/features.cookies.php

Regards.

answered Apr 18, 2013 at 11:44

reverendocabron

1891 silver badge10 bronze badges

Comments

k0pernikus · Accepted Answer · 2013-04-18 12:11:33Z

You could write the information into cookies via PHP and read them via JavaScript, in the example jQuery is assumed:

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"/>
    <script src="http://cachedcommons.org/cache/jquery-cookie/0.0.0/javascripts/jquery-cookie.js"/>
</head>
<body>
<h1>Cookie</h1>
<?php
$expire = time() + 60 * 60 * 24 * 30;
setcookie('some_cookie', "fnord", $expire);
?>
<script type="text/javascript">
    console.log($);
    $(document).ready(function () {
        alert($.cookie("some_cookie"));
    });
</script>
</body>
</html>

If you only need to support modern browser, you better work with localStorage, there also libaries avaiable to prevent you from reinventing the wheel.

Da-Explorer · Accepted Answer · 2013-04-19 06:27:32Z

Thanks All for your solutions.. I have used sessionStorage to store the items. and retrieve them on the contact page. i am providing the code. may be it can help someone- included this in header.php-

<script language="javascript">

function myFunction(item) {
sessionStorage.setItem(item,item);
var keyval=sessionStorage.item;
for(var i = 0; i < sessionStorage.length; i++)  
{  
    var keyName = sessionStorage.key(i);  
    var itemvalue = sessionStorage.getItem(keyName); 
      alert(keyName + " = " + itemvalue);  


}  

}
</script>

and in contactus page-

 for(var i = 0; i < sessionStorage.length; i++)  
{  
    var keyName = sessionStorage.key(i);  
    var itemvalue = (i+1)+"-"+sessionStorage.getItem(keyName); 
     document.contact.message.value=document.contact.message.value+"\n"+itemvalue ;
}

Hope it helps!!!! Thanks all!!

tuvokki · Accepted Answer · 2013-04-19 07:00:39Z

0

You should save the array and post it to the other page by using a form or other method. Javascript is not persisted.

You can use Webstorage for in-between pages persistence. Create a JSON object from your array like this:

var myArrayString = JSON.stringify(myArray);

And store it in a key in the webstorage:

sessionStorage.setItem('arrayStore',myArrayString);

You can read this key back in another page:

sessionStorage.getItem('arrayStore'); //returns 'myArrayString'

...or simply reference the sessionStorage object:

sessionStorage.arrayStore; //returns 'myArrayString'

edited Apr 19, 2013 at 7:00

answered Apr 18, 2013 at 11:31

tuvokki

7401 gold badge11 silver badges19 bronze badges

4 Comments

Da-Explorer Over a year ago

is there any way in php to do this??i am not using any form to submit, so it would be a problem

tuvokki Over a year ago

You can still post it through a hidden form or use some kind of storage like the webstorage in HTML5. Take a look Using HTML5 Web Storage

Da-Explorer Over a year ago

i tried webstorage, its working pretty good.. but i couldnt find a way to add array to the storage and append item to it

tuvokki Over a year ago

Since webstorage works with strings, you could (or should) convert your arrays. Imho the best way to do so is via a JSON-object. You can find the code to do so right here on SO.

Collectives™ on Stack Overflow

How to add items to javascript array that can be accessed on another page?

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related