HTML5 can use json objects to access a group of related objects. The following is an example. We collect a group of user input information and create an Object to include this information, then, the Object is represented by a json string, and the json string is stored in localStorage.
Then, let the user retrieve the name and use the name as the key to ask localStorage to obtain the corresponding json string, and then parse the json string to the Object, the relevant information is extracted from the Object in sequence, then HTML text is constructed, and output at the specified position:
HTML code:
1. <! DOCTYPE html>
2. 3. <meta charset = "UTF-8">
4. <title> HTML5 access to complex data to the json object DEMO </title>
5. <script type = "text/javascript" src = "js/objectStorage. js"> </script>
6. 7.
8. <body>
9.
10. 11.
12. 13. <table>
14. <tr> <td> name: </td> <input type = "text" id = "name"> </td> </tr>
15. <tr> <td> email address: </td> <input type = "text" id = "email"> </td> </tr>
16. <tr> <td> phone number: </td> <input type = "text" id = "phone"> </td> </tr>
17. <tr> <td> </td> <input type = "button" value = "save" onclick = "saveStorage (); "> </td> </tr>
18. </table>
19.
20. 21. 22. <p>
23. <input type = "text" id = "find">
24. <input type = "button" value = "Search" onclick = "findStorage ('msg ');">
25. </p>
26. <! -- The following part is used to display the retrieved information text -->
27. <p id = "msg"> </p>
28. </body>
Javascript contains two functions, one for storing data and the other for retrieving data:
1 ./**
2. * This file is confidential by Charles. Wang
3. * Copyright belongs to Charles. wang
4. * You can make contact with Charles. Wang (charles_wang888@126.com)
5 .*/
6.
7. // store a group of associated data to a json object, and then store the json object in localStorage.
8. function saveStorage (){
9.
10. // create a js object to store the data currently obtained from the form
11. var data = new Object;
12. // The attribute names of the object are sequentially associated with the attribute values entered by the user.
13. data. name = document. getElementById ("name"). value;
14. data. email = document. getElementById ("email"). value;
15. data. phone = document. getElementById ("phone"). value;
16. // create a json object that corresponds to the string data form of the object just created
17. var str = JSON. stringify (data );
18. // store the json object on localStorage. The key is the user name and the value is the json string.
19. localStorage. setItem (data. name, str );
20. console. log ("the data has been saved! The user name to be saved is: "+ data. name );
21 .}
22.
23. // obtain the corresponding json string from localStorage according to the user-input retrieval name as key, parse the json string into a group of information, and print it to the specified position
24. function findStorage (id ){
25. // obtain the user input, which is the name that the user wants to retrieve
26. var requiredPersonName = document. getElementById ("find"). value;
27. // search for localStorage with the retrieved name as the key. The json string is obtained.
28. var str = localStorage. getItem (requiredPersonName );
29. // parse the json string to obtain the Object.
30. var data = JSON. parse (str );
31. // extract the relevant attribute values from the Object and construct the HTML content to be output.
32. var result = "name:" + data. name + '<br> ';
33. result + = "email:" + data. email + '<br> ';
34. result + = "phone number:" + data. phone + '<br> ';
35. // get the container to be output on the page
36. var target = document. getElementById (id );
37. // fill the container with the HTML content just created
38. target. innerHTML = result;
39 .}
Demo:
At the beginning, we tried to construct multiple groups of information and store them in localStorage in sequence. (from the console, we can see that we have entered four groups of data ):
Then we perform the search. For example, if we enter "Handsome Wang", the information related to "Handsome Wang" will be displayed below:
From consortium of parallel lines
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
