保存 Javascript 变量以备后用？

Saving a Javascript variable for later usage?

提问by Comms

I was wondering if there were a way to save one or more javascript variables to the local machine and then call on them later?

我想知道是否有办法将一个或多个 javascript 变量保存到本地机器，然后稍后再调用它们？

var a = b

and then when you go back to the webpage it remembers the value that B was?

然后当您返回网页时，它会记住 B 的值吗？

回答by T.J. Crowder

If you mean in a web browser, there are two options:

如果您的意思是在 Web 浏览器中，则有两个选项：

• Cookies

• Web storage(in your case, specifically, "local storage" as opposed to "session storage")

• 饼干

• Web 存储（在您的情况下，特别是“本地存储”而不是“会话存储”）

Cookies are universally supported by browsers, although users can turn them off. The API to them in JavaScript is really, really bad. The cookies also get sent to your server, so they increase the size of requests to your server, but can be used both client- and server-side.

浏览器普遍支持 Cookie，但用户可以将其关闭。JavaScript 中的 API 非常非常糟糕。cookie 也会发送到您的服务器，因此它们会增加对您服务器的请求的大小，但可以在客户端和服务器端使用。

Settinga cookie is easy, but reading a cookie client-side is a pain. Look at the MDN page above for examples.

设置cookie 很容易，但读取客户端的 cookie 很痛苦。查看上面的 MDN 页面以获取示例。

Web storage is supported by all major modern browsers(including IE8 and up). The API is much better than cookies. Web storage is purely client-side, the data is not sent to the server automatically (you can, of course, send it yourself).

所有主要的现代浏览器（包括 IE8 及更高版本）都支持Web 存储。API 比 cookie 好得多。Web 存储纯粹是客户端，数据不会自动发送到服务器（您当然可以自己发送）。

Here's an example using web storage: Live Copy

以下是使用 Web 存储的示例：Live Copy

<label>Value: <input type="text" id="theValue"></label>
<input type="button" id="setValue" value="Set">
<script>
(function() {
  // Use an input to show the current value and let
  // the user set a new one
  var input = document.getElementById("theValue");

  // Reading the value, which was store as "theValue"
  if (localStorage && 'theValue' in localStorage) {
    input.value = localStorage.theValue;
  }

  document.getElementById("setValue").onclick = function () {
    // Writing the value
    localStorage && (localStorage.theValue = input.value);
  };
})();
</script>

回答by jfriend00

You have three options for storing state that you can retrieve later on in another web page on the same domain:

您可以通过三个选项来存储状态，稍后您可以在同一域的另一个网页中检索这些状态：

1. Save the data in a cookie and then in the future web page, retrieve the data from the cookie.

2. Save the data in local storage in the user's browser and then retrieve the data from local storage in the the future web page.

3. Save the data server-side somehow (via post or ajax call) and then either have the server put it back into the next invocation of the page or request it from the server via an ajax call.

1. 将数据保存在 cookie 中，然后在以后的网页中，从 cookie 中检索数据。

2. 将数据保存在用户浏览器的本地存储中，然后在以后的网页中从本地存储中检索数据。

3. 以某种方式保存服务器端的数据（通过 post 或 ajax 调用），然后让服务器将其放回页面的下一次调用中，或者通过 ajax 调用从服务器请求它。

Local Storage is probably the best choice for a simple client-stored data value that doesn't have a server-side reason to be in a cookie. You can read about Local Storage here.

对于在 cookie 中没有服务器端原因的简单客户端存储数据值，本地存储可能是最佳选择。您可以在此处阅读有关本地存储的信息。

// save data value
localStorage.setItem("name", "John");

// retrieve data value
var name = localStorage.getItem("name");

Local storage has been supported in IE since IE8. If you need support in older versions of IE, you can either use cookies instead or use the local storage shim included on the MDN page I linked earlier.

IE8 开始支持本地存储。如果您需要旧版本 IE 的支持，您可以使用 cookie 代替或使用我之前链接的 MDN 页面中包含的本地存储垫片。

回答by Rivasa

What you are looking for is probably how to make and use Cookies.

您正在寻找的可能是如何制作和使用Cookies。

A cookie is a variable that is stored on the visitor's computer. Each time the same computer requests a page with a browser, it will send the cookie too. With JavaScript, you can both create and retrieve cookie values.

cookie 是存储在访问者计算机上的变量。每次同一台计算机通过浏览器请求一个页面时，它也会发送 cookie。使用 JavaScript，您可以创建和检索 cookie 值。

回答by Max

You could try HTML5 local storage, by use of Modernizrlib.

您可以使用Modernizr库尝试 HTML5 本地存储。

Example:

例子：

if (Modernizr.localstorage) {
    localStorage.setItem("bar", "1");
    var foo = localStorage.getItem("bar");
} else {
    // local storage unavailable
}