Last active
September 14, 2015 03:08
-
-
Save mchayapol/b2bb9237006810a2c5c8 to your computer and use it in GitHub Desktop.
JSON Example 01
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DCOTYPE html> | |
| <head> | |
| <title>Test</title> | |
| <script src="js/jquery-1.11.3.min.js"></script> | |
| <script> | |
| $(document).ready(function () { | |
| /* | |
| // dynamic-length record, delimiter | |
| localStorage.contact = "Chayapol|Moemeng|pic.jpg|08989999|[email protected]"; | |
| // tokenize contact with |, NAH | |
| */ | |
| // JSON - JavaScript Object Notation | |
| var contactData = { | |
| "contacts": [ | |
| { | |
| "firstname": "Chayapol", | |
| "lastname": "Moemeng", | |
| email: "[email protected]", | |
| phone: "089999999", | |
| avatar: "avatar.png" | |
| }, | |
| { | |
| "firstname": "Anna", | |
| "lastname": "Smith", | |
| email: "[email protected]", | |
| phone: "088888888", | |
| avatar: "avatar.png" | |
| } | |
| ] | |
| }; | |
| // Simple example | |
| var contactA = { | |
| "firstname": "Anna", | |
| "lastname": "Smith", | |
| email: "[email protected]", | |
| phone: "088888888", | |
| avatar: "avatar.png" | |
| }; | |
| console.log(contactA); | |
| //localStorage.contact = JSON.stringify(contactA); | |
| var tempContact = JSON.parse( localStorage.contact ); | |
| console.log(tempContact); | |
| $('#firstname').val(tempContact.firstname); | |
| $('#lastname').val(tempContact.lastname); | |
| $('#name').html( ); | |
| // Add button event handler (an annonymous callback function) | |
| $('#btn1').click( | |
| function () { | |
| // Update the current localStorage.contact | |
| tempContact.firstname = $('#firstname').val(); | |
| tempContact.lastname = $('#lastname').val(); | |
| console.log($('#firstname').val() + '--' + tempContact.firstname); | |
| console.log(JSON.stringify(tempContact)); | |
| localStorage.setItem("contact",JSON.stringify(tempContact)); | |
| } | |
| ); | |
| }); | |
| </script> | |
| </head> | |
| <html> | |
| <body> | |
| <div id="div1"> | |
| <input type="text" id="firstname" /><br /> | |
| <input type="text" id="lastname" /><br /> | |
| <span id="name"></span> | |
| <button id="btn1">Update Contact</button> | |
| </div> | |
| <div id="div2"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment