Файл PHP
<input type="text" id="txtMyText"> <button type="button" id="myButton" onclick="addItemToArray()">Add to Array</button> Файл Javascript
var myArray = [] function addItemToArray() { myArray.push(document.getElementById("txtMyText").value); }
Всякий раз, когда я ввожу какое-то значение в текстовое поле и нажимаю кнопку, значение сохраняется в массиве. Когда страница обновляется, мой массив становится пустым. Я хочу сохранить свои элементы, пока не удалю их вручную. Как сохранить их? Должен ли я помещать массив в сеанс PHP или скрытое поле? Если да, то как?
Используйте localStorage api для этой цели, используйте метод setItem() и делайте stringfy массив, прежде чем хранить его в localStorage . Вы можете получить thosed сохраненный элемент с помощью getItem() и проанализировать эти хранимые массивы как-то вроде
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
Вы можете использовать внутреннее хранилище браузера: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage
Храните массив:
sessionStorage.setItem("items", JSON.stringify(items));
Получите массив из хранилища:
var items = JSON.parse(sessionStorage.getItem("items"));
Чтобы сохранить его при обновлении, вам нужно будет хранить его в локальном хранилище. localStorage.setItem("storageName", myArray) то для извлечения его localStorage.getItem("storageName") или var myArray = localStorage.getItem("storageName")
Если вы хотите использовать сеанс PHP, я бы воспользовался AJAX. Вам нужно будет создать файл для обработки массива при его создании. Вот простой пример.
Ваша первая страница
<?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']; ?>
возможно, самым простым способом будет использование jQuery cookie
изменить var myArray = [] / изменить
if ($.cookie('arrayItems')){ myArray=JSON.parse($.cookie('arrayItems')); } function addItemToArray() { myArray.push(document.getElementById("txtMyText").value); $.cookie('arrayItems',JSON.stringify(myArray)); }