Simple HTML5-Wed Storage example: html5wed

Simple HTML5-Wed Storage example: html5wed

1. Overview of Wed Storage

Wed Storage: This function stores data on Wed. The Storage here is for local clients.

There are two types:

SessionStorage: stores data in the session object. Session refers to the time that a user spends browsing a website from entering the website to closing the browser. The session object can be used to save the required data during this period.

LocalStorage stores the data in the local hardware device (hard disk) of the client. Even if the browser is closed, the data still exists and can continue to be used when you open the browser to access the website the next time.

Example:

HTML5 content
1 <! DOCTYPE html> 2 
AppWeb1.js
1 // function saveStorage (id) {2 // var target = document. getElementById (id); 3 // var str = target. value; 4 // The method for storing data key value 5 // sessionStorage. setItem ("message", str); 6 //} 7 // function loadStorage (id) {8 // var target = document. getElementById (id); 9 // read data 10 // var msg = sessionStorage. getItem ("message"); 11 // target. innerHTML = msg; 12 //} 13 localStorage part 14 function saveStorage (id) {15 var target = document. getElementById (id); 16 var str = target. value; 17 localStorage. setItem ("message", str); 18} 19 function loadStorage (id) {20 var target = document. getElementById (id); 21 var msg = localStorage. getItem ("message"); 22 target. innerHTML = msg; 23}
Ii. Simple Wed message book
1 <! DOCTYPE html> 2 
1 appWeb2.js 2 function saveStorage (id) {3 // obtain the value of textarea 4 var data = document. getElementById (id ). value; 5 // obtain the current timestamp 6 var time = new Date (). getTime (); 7 // use the timestamp as the key value, and the value of textarea as the key value content is stored in the local database 8 localStorage. setItem (time, data); 9 // 10 alert ("data saved") is displayed after the storage is successful; 11 // set the parameter passing (ID value) of the loadStorage Function) 12 loadStorage ('msg '); 13} 14 15 function loadStorage (id) {16 var result =' <table border = "1"> '; 17 // traverse all content of local data 18 for (var I = 0; I <localStorage. length; I ++) {19 // get each new key value 20 var key = localStorage. key (I); 21 // obtain the content of the new key value 22 var value = localStorage. getItem (key); 23 // obtain the time object 24 var date = new Date (); 25 // convert the timestamp to the normal time Mon Jun 19 1972 11:12:44 GMT + 0800 (China Standard Time) format 26 date. setTime (key); 27 // convert the converted content to the string 28 var datestr = date. toGMTString (); 29 // Add all new content to the result variable 30 result + = '<tr> <td>' + value + '</td> <td>' + datestr +' </td> </tr> '31} 32 result + = '</table> '; 33 var target = document. getElementById (id); 34 // Add all content to the element to display 35 target. innerHTML = result; 36} 37 38 function clearStorage () {39 // clear all locally stored content 40 localStorage. clear (); 41 alert ("cleared"); 42}
 
Display Effect:
 
Iii. Local Storage-simple database
1 <! DOCTYPE html> 2 
1 // appWed3.js 2 function saveStorage () {3 // create an Object and put all the input content in each attribute of the Object. 4 var data = new Object; 5 data. name = document. getElementById ("name "). value; 6 data. email = document. getElementById ("email "). value; 7 data. tel = document. getElementById ("tel "). value; 8 data. meno = document. getElementById ("meno "). value; 9 // convert all the attributes and values in the object to the JSON string format 10 var str = JSON. stringify (data); 11 // use the name attribute in the data object as the key value, and save the packaged JSON data as the content to the local database for 12 localStorage. setItem (data. name, str); 13 // The prompt 14 alert ("data saved"); 15} 16 17 function findStorage (id) is displayed after the data is saved successfully) {18 // obtain the input value 19 var find = document. getElementById ('Find '). value; 20 // obtain the value, using the key value to find the content 21 var str = localStorage. getItem (find); 22 // convert the queried content from a JSON string to a JS object 23 var data = JSON. parse (str); 24 // obtain all values of the object in order. 25 var result = "name:" + data. name + "<br/>"; 26 result + = "Email:" + data. email + "<br/>"; 27 result + = "Tel:" + data. tel + "<br/>"; 28 result + = "Remarks:" + data. meno + "<br/>"; 29 var target = document. getElementById (id); 30 target. innerHTML = result; 31}
Display Effect: