localStorage test

by sas_sam

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <meta name="user-login" content="">
  <title>JS Bin</title>
</head>
<body>
  <div class="alert"></div>
  <button id="getStorage">Get storage</button>
  <button id="login">Login</button>
  <button id="logout">Logout</button>
  
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>

JavaScript

debugger;
var meta = document.querySelector("meta[name=user-login]");

!function() {
  if (meta instanceof HTMLMetaElement) {
    var userName = meta.content;
    var hasUserName = String(!!userName.length);
    
    try {
      localStorage.setItem("logged-in", hasUserName)
    } catch (e) {
      return
    }
    
    window.addEventListener("storage", function(event) {
      if (event.storageArea === localStorage && "logged-in" === event.key && event.newValue !== hasUserName) {
        hasUserName = event.newValue;
        
        $('.alert').html("User has signed " + (hasUserName ? "in" : "out"));
      }
    });
  }
}

$("#getStorage").click(function() {
  console.log(localStorage);
});

$("#login").click(function() {
  $('meta[name=user-login]').attr('content', 'John Doe');
  console.log('login');
});

$("#logout").click(function() {
  $('meta[name=author]').attr('content', '');
  console.log('logout');
});