如何保存javascript變量

Question

我有一個javascript變量，它在.php腳本中由javascript函數遞增，唯一的問題是頁面在調用函數時重新加載，所以我需要一些方法來保存變量，當頁面是重新加載或輸入時。 我知道你可以進行本地保存，但我不確定它是否在您離開網站時保存變量。

我的變量是在html腳本中。

<script type="text/javascript"> 

                    var varNumber= 1;
                    document.getElementById("varNumber").innerHTML = varNumber;
                    document.getElementByID("varNumber").value = varNumber;


                    function addToVariable() {
                        varNumber= varNumber+ 1 ;
                        document.getElementById("varNumber").innerHTML = varNumber;
                    }

                </script>

Answer 1

以下是三種客戶端方法，用於在頁面刷新期間保存JavaScript變量，以及它們可以持久保存數據的描述。

使用本地存儲保存JavaScript變量

使用現代瀏覽器，使用本地存儲保存JS變量非常簡單方便。

var get = function (key) {
  return window.localStorage ? window.localStorage[key] : null;
}

var put = function (key, value) {
  if (window.localStorage) {
    window.localStorage[key] = value;
  }
}

保存和讀取對象而不是簡單變量：

localStorage.yourObject = JSON.stringify(obj);

obj = JSON.parse(localStorage.yourObject || "{}");

持久性：

如果用戶如此配置，則用戶代理可以在一段時間之后自動刪除存儲的數據。

例如，用戶代理可以配置為將第三方本地存儲區域視為僅會話存儲，一旦用戶關閉了可以訪問它的所有瀏覽上下文，就刪除數據。

這可以限制站點跟蹤用戶的能力，因為站點在他對站點本身進行認證時（例如，通過購買或登錄服務）僅能夠跨多個會話跟蹤用戶。

但是，這也降低了API作為長期存儲機制的實用性。 如果用戶不完全理解數據到期的影響，它還可能使用戶的數據處於危險之中。

參考文獻：

• http://dev.w3.org/html5/webstorage/
• 跨瀏覽器刷新在JavaScript對象中保留值
• localStorage的持久性如何？

---

使用cookie保存JavaScript變量

使用cookie保存變量：

function createCookie(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=/";
}

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

持久性：

會話cookie - 這些是臨時的，在會話結束時關閉瀏覽器時會被刪除。

持久性cookie - 這些仍然存在於客戶端硬盤驅動器上，直到它們被刪除或過期。

這最終取決於用戶。 他們可能對cookie和本地存儲感到偏執，並將它們設置為僅會話或根本不設置。

REF： 設置cookie並使用JavaScript獲取cookie

---

使用window.name保存JavaScript變量

您還可以使用窗口的名稱window.name來使用JavaScript會話存儲信息。

持久性：

只有使用相同的窗口/選項卡時，此功能才有效。

REF： http ： //www.thomasfrank.se/sessionvars.html

Answer 2

您可以在客戶端使用localStorage

<script>
  localStorage.setItem("mykey",99); // set a variable

  var varNumber = localStorage.getItem("mykey"); // retrieve variable
</script>

Answer 3

您可以使用AJAX來執行PHP，例如：

<?php
session_start(); $r = array();
if(isset($_POST['holdNumber'])){ // assumes {holdNumber:numberHere} sent through AJAX
  if(preg_match('/^\d+$/', $_POST['holdNumber']){
    $r['heldNumber'] = $_SESSION['holdNumber'] = $_POST['holdNumber'];
  }
  else{
    // holdNumber hack
  }
}
elseif(isset($_POST['load'])){
  if(+$_POST['load'] === 1){ // assumes sending {load:1} in AJAX
    if(isset($_SESSION['holdNumber']){
      $r['heldNumber'] = $_SESSION['holdNumber'];
    }
    else{
      $r['heldNumber'] = $_SESSION['holdNumber'] = 0;
    }
  }
  else{
    // load hack
  }
}
echo json_encode($r);
?>