javascript - 在 DOM 中持久化数据

Question

我在 Firebase 应用程序中工作，我需要在 DOM 中保留一些数据，一旦用户登录，您就可以看到用户名和电子邮件，但是一旦刷新页面，用户仍然处于登录状态但是这些数据从 DOM 中消失了。

  <div class="item">
    {{::userDisplayInfo.name}}
  </div>
  <div class="item">
    {{::userDisplayInfo.email}}
  </div>

这里是 JS

  $scope.signIn = function (user) {
      auth.$authWithPassword({
        email: user.email,
        password: user.pwdForLogin
      }).then(function (authData) {
        ref.child("users").child(authData.uid).once('value', function (snapshot) {
          var val = snapshot.val();
          $scope.$apply(function () {
            $rootScope.name = val;
            $scope.userDisplayInfo.name = $rootScope.name.displayName;
            $scope.userDisplayInfo.email = $rootScope.name.email;
          });
          console.log(user);
        });
      }).catch(function (error) {
        console.log(error);
      });
    };

那么，我应该怎么做才能将用户和电子邮件保存在 DOM 中？

Answer 1

大多数现代浏览器都支持 HTML5 本地存储。首先，检查浏览器是否支持这样:

if(typeof(Storage) !== "undefined") {
    // localStorage is OK to use
} else {
    // no localStorage support
}

然后要设置您的数据，只需执行以下操作:

// Set
localStorage.setItem("user", userId);

// Get
var userId= localStorage.getItem("user");

记得在退出时清除该值，因为即使在浏览器关闭并重新打开后，localStorage 仍然存在。