Question

我创建了一个JavaScript对象。

var myObj = {};

现在，当用户在应用程序中进行游戏时，我们会为此对象分配一些值。

myObj['Name'] = 'Mr. Gates';
myObj['Age'] = 58;

...
...
...
myObj['Role'] = 'CEO';

但是每当页面刷新时，对象都会丢失其值。

有没有办法使用HTML 5 \或任何其他技术在页面刷新期间保留这些值。

Answer 1

是的，您有两个主要选择：

使用Cookie。 Cookie很容易从JavaScript中设置，但读起来有点痛苦。你说过你正在使用jQuery;有几个jQuery插件可以让cookie变得更容易，如果你搜索“jquery cookie plugin”，你会找到它们。
使用web storage，supported by all major browsers, even IE8。你有两个选择：“会话”存储只持续这个“会话”，“本地”存储一直持续到用户清除它或浏览器决定它需要那个空间用于其他东西。

第二个选项非常易于使用，您可以使用JSON格式的字符串存储内容（JSON对象也是supported by all major browsers）：

存储您的对象：

localStorage.yourObject = JSON.stringify(obj);

检索对象（例如，在页面加载时），如果没有存储则返回空白对象：

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

在上文中，localStorage是浏览器为本地存储提供的变量（和底层实现）。如果您想要会话存储，可以使用sessionStorage。

这是一个完整的本地存储示例：Live Copy

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<meta charset=utf-8 />
<title>Local Storage</title>
</head>
<body>
  <label><code>Name</code> property for our object:
    <input type="text" id="txtName">
  </label>
  <script>
    (function() {
      var txtName = $("#txtName");
      var obj = JSON.parse(localStorage.yourObject || '{"Name": ""}');
      txtName.val(obj.Name);
      // This is obviously hyperactive:
      txtName.on("change keypress keyup blur paste click", function() {
        obj.Name = txtName.val();
        localStorage.yourObject = JSON.stringify(obj);
      });
    })();
  </script>
</body>
</html>

跨浏览器刷新在JavaScript对象中保留值

1 个答案: