跨浏览器刷新保持JavaScript对象中的值[重复]答案

【问题标题】：Persisting values in JavaScript object across browser refresh [duplicate]跨浏览器刷新保持JavaScript对象中的值[重复]
【发布时间】：2014-06-01 09:24:08
【问题描述】：

我创建了一个 JavaScript 对象。

var myObj = {};

现在，当用户使用应用程序时，我们为这个对象分配了一些值。

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

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

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

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

【问题讨论】：

这都是关于 cookie 的！！！
旁注：obj['Name'] 的另一种写法是obj.Name。只要属性名称符合 JavaScript 标识符名称的要求（不能有空格或其他字符，必须以字母开头等），您就可以使用点表示法。对于带有空格等的属性名称，或者以非字母开头的属性名称，则需要使用括号表示法。

标签： javascript jquery html persistent-storage

【解决方案1】：

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

使用 cookie。从 JavaScript 中设置 Cookie 很容易，但阅读起来有点麻烦。你说过你正在使用 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>

【讨论】：