问题

How to delete local storage items of browser on logout using php.

I want to delete all saved browser data on logout using php.

Because I want to show bootstrap alert box only on every login but not on every page refresh.

When user logout it will again reset. When user again login it will show.

My code is shown below

$(document).ready(function() {
  if (localStorage.getItem('message1') != 'shown') {
    $('#message1').toggleClass('in');
    window.setTimeout(function() {
      $("#message1").fadeTo(500, 0).slideUp(500, function() {
        $(this).remove();
      });
    }, 10000);
    localStorage.setItem('message1', 'shown')
  }
});

.flyover {
  margin-right: -400px;
  overflow: hidden;
  opacity: 0.9;
  z-index: 1050;
  transition: all 1s ease;
  position: fixed;
  top: 100px;
  right: 20px;
  width: 300px;
  z-index: 2000;
}

.flyover.in {
  margin-right: 10px;
}

.alert {
  color: white ! important;
}

.alert.close {
  font-size: 18px ! important;
  font-weight: 300 ! important;
  line-height: 18px ! important;
  color: white ! important;
}

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
</head>
<body>
  <div id="message1" class='alert bg-green flyover'><a href='#' class='close close-x' data-dismiss='alert' aria-label='close'><i class="fa fa-times text-white" aria-hidden="true"></i>
</a><strong>Successfully Logged In<br></strong>
    <h3>Welcome,
      <?php echo ucwords($adminRow['admin_name']); ?>
    </h3>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>

回答1:

If you want to clear the storage inside login:

$('.logout').click(function() {
  $.ajax({
    type: 'GET',
    url: 'logout.php',
    data: {
      id: '123'
    },
    datatype: 'html',
    cache: 'false',
    success: function(response) {
      localStorage.clear();
    },
    error: function() {

    }
  });
});

回答2:

Since PHP is a server side language, you cannot do anything client side using PHP. You need javascript to do the job.. All you can do with PHP is invoke the javascript when needed.

For example you can write js code to reset to whatever you want and invoke that on login page onload. So, whenever user visits the login page to get logged-in your js will invoke. OR you can bind it to your on-click event on the logout button. OR you can keep that into login page only, and upon logout redirect the user back to the login page, that will invoke the required js. If you need the code example someone else have posted in their answer.

回答3:

My solution was to add a script tag on the login page

<script type="text/javascript">
    localStorage.clear();
</script>

回答4:

I found answer to my question this can be easily done with the help of PHP & any database.

In dashboard.php write this code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dashboard</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <style>
       .flyover {


margin-right:-400px;
   overflow: hidden;
   opacity: 0.9;
   z-index: 1050;
   transition: all 1s ease;
   position: fixed;
        top: 100px;
        right: 20px;
        width: 300px;
        z-index: 2000;
}
 
.flyover.in {
  margin-right: 10px;

}
      .alert{
        color: white ! important;
      }
      .bg-green{background-color: green ! important;}
      .alert.close{
        font-size: 18px ! important;
        font-weight: 300 ! important;
        line-height: 18px ! important;
        color: white ! important;
      }
        </style>
    </head>
    <body>
         <?php 
          $message = $adminRow['message'];
         if($message == 1){
         <div id="message1" class='alert bg-green flyover'><a href='#' class='close close-x' data-dismiss='alert' aria-label='close'><i class="fa fa-times text-white" aria-hidden="true"></i>
    </a><strong>Successfully Logged In<br></strong> 
                <h3>Welcome, <?php echo ucwords($adminRow['admin_name']); ?></h3>
             </div>
          <?php }
           $admin_id = $adminRow['admin_id'];
            $query = mysql_query("UPDATE admin SET message = '0' WHERE admin_id = '$admin_id'");
          ?>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
              <!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
            <script>
               $('#message1').toggleClass('in');
         window.setTimeout(function() {
        $("#message1").fadeTo(500, 0).slideUp(500, function(){
            $(this).remove(); 
        });
        }, 10000);
             </script>
            </body>

    
    </html>

In logout.php write this code

$admin_id = $adminRow['admin_id'];
$query = mysql_query("UPDATE admin SET message = '1' WHERE admin_id = '$admin_id'");

Result: The Alert Box will show only when admin logged in.

Logic:

When admin log in Check Message == 1 if yes print message and set Message == 0. When admin log out Set Message == 1. So, that when admin again login it will show message.

来源：https://stackoverflow.com/questions/37739148/how-to-delete-local-storage-items-of-browser-on-logout-using-php

标签

javascript

php

jquery

twitter-bootstrap

local-storage