如何保存一个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

您可以在客户端使用 localStorage

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

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

Answer 2

以下是三种客户端方法，用于在页面刷新时保存 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/
• Persisting values in JavaScript object across browser refresh
• How persistent is 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 和本地存储，并将它们设置为仅会话或无 全部。

参考号：Set cookie and get cookie with JavaScript

---

使用 window.name 保存 JavaScript 变量

您还可以使用窗口名称 window.name 来存储信息，使用 JavaScript session。

持久性：

这只有在使用相同的窗口/选项卡时才有效。

参考号：http://www.thomasfrank.se/sessionvars.html

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);
?>