跨浏览器刷新时在JavaScript对象中持久化值

Question

跨浏览器刷新时在JavaScript对象中持久化值

7

我已经创建了一个JavaScript对象。

var myObj = {};

当用户与应用程序进行交互时，我们会给这个对象分配一些值。

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

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

但每当页面刷新时，对象就会失去其值。

是否有使用HTML 5或其他技术在页面刷新时保留这些值的方法。

- SharpCoder

这就是关于Cookie的全部内容！ - Bhojendra Rauniyar

1

另外一种写法是 obj['Name'] 可以写成 obj.Name。只要属性名符合 JavaScript 标识符的要求（不能有空格或其他字符，必须以字母开头等），就可以使用点表示法。对于具有空格等特殊字符或以非字母开头的属性名称，则需要使用括号表示法。 - T.J. Crowder

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- T.J. Crowder · Accepted Answer

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

使用 cookie。从 JavaScript 设置 cookie 很容易，但读取起来有点麻烦。你说你正在使用 jQuery；有几个 jQuery 插件可以使 cookie 更加容易，如果你搜索“jquery cookie plugin”，你会找到它们。
使用 web storage，它被所有主流浏览器支持，甚至包括 IE8。你有两个选择：“Session”存储仅持续此“会话”，而“local”存储会持续到用户清除它或浏览器决定需要该空间进行其他操作为止。

第二个选项非常容易使用，你可以使用 JSON 格式化字符串存储东西（JSON 对象也被所有主流浏览器支持）：

存储你的对象：

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>