簡體   English   中英

頁面刷新時如何保留javascript數組?

[英]How to retain javascript array while page refresh?

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")

可能最簡單的方法是使用 jQuery cookie

編輯var myArray = [] /edit

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


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

如果您想使用 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'];
?>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM