在浏览器刷新期间持久化JavaScript对象中的值

Persisting values in JavaScript object across browser refresh

本文关键字：对象 JavaScript 持久化 浏览器 刷新      更新时间：2023-09-26

我创建了一个JavaScript对象。

var myObj = {};

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

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

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

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

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

  1. 使用cookie。Cookie很容易从JavaScript设置，但读起来有点麻烦。您已经说过您正在使用jQuery；有几个jQuery插件可以让cookie变得更容易，如果你搜索"jQuery cookie插件"，你会找到它们。

  2. 使用所有主流浏览器都支持的网络存储，甚至IE8。您有两种选择："会话"存储，只持续此"会话"；"本地"存储，一直持续到用户将其清除或浏览器决定需要该空间来放置其他内容。

第二个选项非常容易使用，您可以使用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>
相关文章：