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

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

javascript jquery html

跨浏览器刷新在JavaScript对象中持久化值,javascript,jquery,html,persistent-storage,Javascript,Jquery,Html,Persistent Storage,我已经创建了一个JavaScript对象 var myObj = {}; 现在，当用户使用应用程序时，我们为这个对象分配一些值 myObj['Name'] = 'Mr. Gates'; myObj['Age'] = 58; ... ... ... myObj['Role'] = 'CEO'; 但每当页面刷新时，对象就会释放其值是否有任何方法可以使用HTML 5\或任何其他技术在页面刷新期间保留这些值。是的，您有两个主要选择：用饼干。从JavaScript设置Cookies很容易，但阅读

我已经创建了一个JavaScript对象

var myObj = {};

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

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

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

但每当页面刷新时，对象就会释放其值

是否有任何方法可以使用HTML 5\或任何其他技术在页面刷新期间保留这些值。

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

用饼干。从JavaScript设置Cookies很容易，但阅读起来有点困难。您说过您正在使用jQuery；有几个jQuery插件可以使cookie变得更容易，如果你搜索“jQuery cookie插件”，你会找到它们

使用，即。您有两种选择：“会话”存储只能用于此“会话”，以及“本地”存储，直到用户将其清除或浏览器决定需要该空间用于其他用途为止

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

存储对象：

localStorage.yourObject = JSON.stringify(obj);

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

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

在上面的例子中，

localStorage

是浏览器为本地存储提供的变量（和底层实现）。如果需要会话存储，可以使用会话存储

下面是一个完整的本地存储示例：

这都是关于饼干的！！！旁注：另一种编写

obj['Name']

的方法是

obj.Name

。只要属性名称符合JavaScript标识符名称的要求（不能有空格或其他字符，必须以字母开头，等等），就可以使用点表示法。对于包含空格等的属性名称，或者以字母以外的其他内容开头的属性名称，则需要使用括号表示法。

<!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>