Example of HTML5 Local 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 Local Storage

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta charset="UTF-8"> 
  <title>Example of HTML5 Local 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. jav  a  2s  .  com-->
  $(document).ready(function(){
    $(".save").click(function(){
      var firstName = $("#firstName").val();
        localStorage.setItem("first_name", firstName);
      document.write("Your first name is saved.");
    });
    $(".access").click(function(){
        document.write("Hi, " + localStorage.getItem("first_name"));
    });
  });
} else{
    document.write("Sorry, your browser do not support local storage.");
}
</script> 
 </head> 
 <body> 
  <form> 
   <label>First Name: <input type="text" id="firstName"></label> 
   <button type="button" class="save">Save Name</button> 
   <button type="button" class="access">Get Name</button> 
  </form>   
 </body>
</html>

Related Tutorials