localStorage不適用於Mozilla Firefox 22.0適用於Ubuntu Canconical 1.0

Question

我有一個帶有tw形式的網頁。一個按鈕位於它們下面。當我點擊按鈕時，我使用fadeIn/fadeOut切換窗體顯示/隱藏。我添加了功能，以便即使在刷新頁面時，仍然是當前頁面的當前頁面。我爲此使用了html5 localStorage。我在Chrome中完美工作，但它在Ubuntu Canconical 1.0的Mozilla Firefox 22.0中不起作用。

jsFiddle.

HTML：

<section id="content"> 
    <div id="logo" style="margin-left: 0;"></div> 
    <div id="container"> 
     <form id="sign_up" action="login.php" method="post"> 
      <table style="margin: 0px auto;"> 
       <tr> 
        <td align="center"> <span style="font-weight: bold;font-size: 2em; color: Gray;">Sign Up</span> 

        </td> 
       </tr> 
       <tr> 
        <td> 
         <input type="text" placeholder="Username" name="username" required="required" maxlength="15" pattern="^[A-Za-z0-9_]{1,15}$" /> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <input type="password" placeholder="Password" name="password" required="required" /> 
         <br /> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <input class="input" type="password" placeholder="Confirm Password" name="confirm_password" required="required" /> 
         <br /> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <br/> 
        </td> 
       </tr> 
       <tr align="right"> 
        <td> 
         <input class="btn" type="submit" value="Sign Up" name="submit_sign_up"> 
        </td> 
       </tr> 
      </table> 
     </form> 
     <form id="sign_in" action="login.php" method="post"> 
      <table style="margin: 0 auto;"> 
       <tr> 
        <td align="center"> <span style="font-weight: bold;font-size: 2em; color: Gray;">Sign In</span> 

        </td> 
        <tr> 
         <td> 
          <input class="input" type="text" placeholder="Username" name="username" required="required" maxlength="15" pattern="^[A-Za-z0-9_]{1,15}$" /> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <input class="input" type="password" placeholder="Password" name="password" required="required" /> 
          <br /> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <br/> 
         </td> 
        </tr> 
        <tr align="right"> 
         <td> 
          <input class="btn" type="submit" value="Sign In" name="submit_sign_in"> 
         </td> 
        </tr> 
      </table> 
     </form> 
     <br/> 
     <input id="sign_up_btn" class="btn" type="submit" style=" font-weight:bold; height:40px; width: 292px;" value="Create An Account"></input> 
    </div> 
</section> 

CSS：

#content { 
    margin-top: 10%; 
} 
#container { 
    margin: 0 auto; 
    width: 80%; 
    text-align: center; 
} 
input[type=text], input[type=password] { 
    width: 250px; 
    min-height: 25px; 
    border-radius: 3px; 
    border: 0; 
    padding: 7px; 
    font-family: Calibri; 
    font-size: 20px; 
    box-shadow: 0px 0px 3px 1px #aaa inset; 
    box-sizing: border-box; 
} 
#sign_in, #sign_up { 
    border: 1px solid #4f4f4f; 
    border-radius: 10px; 
    margin: 0 auto; 
    max-height: 250px; 
    width: 292px; 
    padding: 10px; 
    background-color: #eee; 
    border: 0px; 
    box-shadow: 0px 0px 15px 1px #000; 
} 
#sign_up { 
    display: none; 
    max-height: 275px; 
} 

JS：

jQuery(function ($) { 

    var $sUp = $("#sign_up"), 
     $sIn = $("#sign_in"); 

    $("#content").on('click', "#sign_up_btn", function() { 

     $sIn.stop().fadeOut(800, function() { 
      $sUp.fadeIn(800); 
     }); 
     $(this).stop().fadeOut(800, function() { 
      $(this).attr({ 
       value: "Already have an account?", 
       id: "sign_in_btn" 
      }).fadeIn(800); 
     }); 
     localStorage.setItem('lastForm', 'sign_up'); 
    }).on('click', "#sign_in_btn", function() { 

     $sUp.stop().fadeOut(800, function() { 
      $sIn.fadeIn(800); 
     }); 
     $(this).stop().fadeOut(800, function() { 
      $(this).attr({ 
       value: "Create An Account", 
       id: "sign_up_btn" 
      }).fadeIn(800); 
     }); 
     localStorage.setItem('lastForm', 'sign_in'); 
    }); 

    if (localStorage.getItem('lastForm') == "sign_up") { 
     $sIn.fadeOut(0); 
     $sUp.fadeIn(0); 
    } 
}); 

我該如何使這個cross-browser兼容？

Answer 1

試試這個：

localstorage.lastform = 「sign_in」;