如何在页面刷新时保留 javascript 数组

How to retain javascript array while page refresh?

本文关键字：保留 javascript 数组 刷新      更新时间：2023-09-26

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()方法并在存储到localStorage之前将数组字符串化。您可以通过getItem()检索存储的项目，并使用 JSON.parse() 解析存储的数组，类似于

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--^
}

演示

您可以使用浏览器的内部存储： 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));
 }
相关文章：