How to retain javascript array while page refresh?

Question

PHP file

<input type="text" id="txtMyText">
<button type="button" id="myButton" onclick="addItemToArray()">Add to Array</button>

Javascript file

var myArray = []

function addItemToArray()
{
    myArray.push(document.getElementById("txtMyText").value);
}

Whenever I enter some value in a text field and hit the button, value gets stored in the array. When a page is refreshed, my array becomes empty. I want to retain its elements until I remove them manually. How do I retain them? Should I put array in PHP session or hidden field? If yes, then how?

Suman Bogati · Accepted Answer · 2020-06-21T11:45:26.583

4

Use localStorage API for this purpose, Use setItem() method and do stringify the array before storing into the localStorage. You can retrieve the stored item by getItem() and parse the stored array using JSON.parse(), something like

if(localStorage.getItem('textValues') == null){
    var myArray =[];
}else{
    myArray =  JSON.parse(localStorage.getItem('textValues'));
   //-----------^parse the item by getting---^--stored item
}

function addItemToArray(){
    myArray.push(document.getElementById("txtMyText").value);
    localStorage.setItem('textValues', JSON.stringify(myArray));
    //------------^store the item by stringify--^
}

DEMO

edited Jun 21 '20 at 11:45

answered Mar 29 '14 at 02:34

Suman Bogati

6,289
1
23
34

Now, how can I store this javascript array in a PHP session as I have to use this info at other pages also? – Mar 29 '14 at 02:52
You can the those stored item into other page in same way as defined at above code. – Suman Bogati Mar 29 '14 at 02:57
I meant you `You can get those stored item`. – Suman Bogati Mar 29 '14 at 03:04

score 2 · Answer 2 · answered Mar 29 '14 at 02:06

2

You could use the browser's internal storage: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage

Store the array:

sessionStorage.setItem("items", JSON.stringify(items));

Get the array from storage:

var items = JSON.parse(sessionStorage.getItem("items"));

answered Mar 29 '14 at 02:06

000

26,951
10
71
101

Only thing missing is a catch for the initial values – Paul S. Mar 29 '14 at 02:39
@Joe Frambach - I was also looking for initialization and checking for null values in sessionStorage. – Mar 29 '14 at 02:53

score 1 · Answer 3 · answered Mar 29 '14 at 02:06

1

To retain it on refresh you are going to need to store in local storage. localStorage.setItem("storageName", myArray) then to retrieve it localStorage.getItem("storageName") or var myArray = localStorage.getItem("storageName")

answered Mar 29 '14 at 02:06

CodeMaster

15
3

andrew · Answer 4 · 2014-03-29T02:52:17.693

1

probably the easiest way would be using jQuery cookie

edit var myArray = [] /edit

if ($.cookie('arrayItems')){
      myArray=JSON.parse($.cookie('arrayItems'));
}


 function addItemToArray()  
 {
   myArray.push(document.getElementById("txtMyText").value);
  $.cookie('arrayItems',JSON.stringify(myArray));
 }

edited Mar 29 '14 at 02:52

answered Mar 29 '14 at 02:09

andrew

9,313
7
30
61

1

No indication in the question that jQuery is being used. Adding all of jQuery just to tweak a cookie seems inefficient. http://www.doxdesk.com/img/updates/20091116-so-large.gif – ceejayoz Mar 29 '14 at 02:17
@ceejayoz - I am using jQuery. – Mar 29 '14 at 02:23
don't forget to put an else on that if to define the array otherwise you'll get an undefined error the first time. – I wrestled a bear once. Mar 29 '14 at 02:29
@nkp `$.cookie` is probably not working because it's not actually part of jQuery. It's a plugin - https://github.com/carhartl/jquery-cookie – ceejayoz Mar 29 '14 at 02:30

score 1 · Answer 5 · answered Mar 29 '14 at 02:26

If you want to use a PHP session, I would take advantage of AJAX. You'll need to create a file to handle the array as you create it. Here's a simple example.

Your first page

<?php 
    //start the PHP session to save your array in
    session_start(); 
?>

<script type="text/javascript">
var myArray = [];
<?php
    if(isset($_SESSION['myArray'])) {
        foreach($_SESSION['myArray'] as $item){
            // prepopulate the session array from PHP
            echo "myArray[] = ".$item.";";
        }
    }
?>
function addItemToArray(){
    var addvalue = document.getElementById("txtMyText").value;
    myArray.push(addvalue);
    if (window.XMLHttpRequest){  var xmlhttp=new XMLHttpRequest();  }else {  var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }
    xmlhttp.onreadystatechange=function()  {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)    {
            document.getElementById("myDiv").innerHTML += xmlhttp.responseText .", ";
        }
    }
    xmlhttp.open("GET","save_array.php?newValue="+,true);
    xmlhttp.send();
}
</script>

<div id="show_my_array">
    <?php
        //show array saved from last time
        if(isset($_SESSION['myArray'])) {
            foreach($_SESSION['myArray'] as $item){
                // prepopulate the session array from PHP
                echo $item.", ";
            }
        }
    ?>
</div>
<input type="text" id="txtMyText">
<button type="button" id="myButton" onclick="addItemToArray()">Add to Array</button>

save_array.php

<?php
session_start();
if(!isset($_SESSION['myArray'])){
    $_SESSION['myArray'] = array();
}
$_SESSION['myarray'][] = $_GET['newValue'];
echo $_GET['newValue'];
?>

How to retain javascript array while page refresh?

5 Answers5

Linked