Example of HTML5 Session Storage - HTML CSS HTML

HTML CSS examples for HTML:Local Storage

  1. HOME
  2. HTML CSS
  3. HTML
  4. Local Storage

Description

Example of HTML5 Session Storage

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta charset="UTF-8"> 
  <title>Example of HTML5 Session Storage</title> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
  <script type="text/javascript">
// Check if the localStorage object exists
if(localStorage){<!--from   w w  w . j av  a  2s. c  o m-->
  $(document).ready(function(){
    $(".save").click(function(){
      var lastName = $("#lastName").val();
        sessionStorage.setItem("last_name", lastName);
      document.write("Your last name is saved.");
    });
    $(".access").click(function(){
        document.write("Hi, " + localStorage.getItem("first_name") + " " + sessionStorage.getItem("last_name"));
    });
  });
} else{
    document.write("Sorry, your browser do not support local storage.");
}
</script> 
 </head> 
 <body> 
  <form> 
   <label>Last Name: <input type="text" id="lastName"></label> 
   <button type="button" class="save">Save Name</button> 
   <button type="button" class="access">Get Name</button> 
  </form>   
 </body>
</html>

Related Tutorials