h5 new knowledge _1

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <input type="file" id="file" />
 9     <p></p>
10     <img src="" alt="" width="300">
11 <script src="js/jquery-3.3.1.js"></script>
12 <script>
13     $(function () {
14        $('#file').on('change', function () {
15            // console.log(this.files);
16            // 1. Create a file read target 
. 17             the let Reader = new new the FileReader ();
 18 is             // 2. Image reading 
. 19             reader.readAsDataURL ( the this .files [0 ]);
 20 is             // 3. completed reading the content 
21             $ (Reader) .on ( 'Load', function () {
 22 is                 // the console.log (this.result); 
23 is                 $ ( 'IMG') attr ( 'the src',. the this .Result);
 24             })
 25         } )
 26 is      });
 27 </ Script>
 28 </ body>
 29 </ HTML>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title></title>
 7 </head>
 8 
 9 <body>
10     <input type="file" id="file" />
11     <div id="content"></div>
12     <script src="js/jquery-3.3.1.js"></script>
13     <script>
14         $(function () {
15             $('#file').on('change',@17Contents 1. acquired file, a collection of//16() {
function                 
                 the console.log (this.files); 
18 is  
. 19                  // 2. initialization file read target 
20 is                  the let Reader = new new the FileReader ();
 21 is                  // the console.log (Reader); 
22 is                  // the console.log (typeof this.files [0]); 
23 is  
24                  // 3. read file content 
25                  reader.readAsText ( the this .files [0 ]);
 26 is                  // reader.readAsBinaryString (this.files [0]); 
27                  // reader.readAsDataURL ( this.files [0]); 
28  
29                  // 4. content acquisition read 
30                  $ (Reader) .on ( 'Load', function () {
31                     console.log("11")
32                     console.log(this.result);
33                     $('#content').html(this.result);
34                 })
35             });
36         });
37     </script>
38 </body>
39 
40 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>sessionStorage</title>
 6 </head>
 7 <body>
 8    <!--<input type="text" name="intro" />-->
 9    <br>
10    <br>
11    <button id="setData">写数据</button>
12    <button id="getData">读数据</button>
13    <button id="clearData">删除数据</button>
14 <script src="js/jquery-3.3.1.js"></script>
15 <script>
16     $(function () {
17          // 1. The setting data 
18 is          $ ( '# the setData') ON ( 'the Click'. Function () {
 . 19              the let ARR = [ 'John Doe', 'John Doe', 'Wang Wu' ];
 20 is              window. sessionStorage.setItem ( 'name', 'small stitch' );
 21 is              window.sessionStorage.setItem ( 'address', 'Shanghai' );
 22 is              window.sessionStorage.setItem ( 'Friends' , the JSON.stringify (ARR));
 23 is          });
 24  
25          // 2. read data 
26 is          $ ( '# the getData') ON ( 'the Click',.function () {
27             console.log(sessionStorage.getItem('name'));
28             console.log(sessionStorage.getItem('address'));
29             console.log(JSON.parse(sessionStorage.getItem('friends')));
30         });
31 
32         // 3. 删除数据
33         $('#clearData').on('click', function () {
34              // sessionStorage.removeItem('name');
35              // sessionStorage.removeItem('address');
36              // 删除所有的
37              sessionStorage.clear();
38         });
39 
40     });
41 </script>
42 </body>
43 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>localStorage</title>
 6 </head>
 7 <body>
 8     <button id="setData">写数据</button>
 9     <button id="getData">读数据</button>
10     <button id="clearData">删除数据</button>
11     <script src="js/jquery-3.3.1.js"></script>
12     <script>
function             $ ( 'the setData #'). ON ( 'the Click',151. setting data//14() {
function         $ (13 is             
() {
 16                  the let ARR = [ 'John Doe', 'John Doe', 'Wang Wu' ];
 . 17                  window.localStorage.setItem ( 'name', 'small stitch' );
 18 is                  window.localStorage.setItem ( 'address ',' Shanghai ' );
 . 19                  window.localStorage.setItem (' Friends' , the JSON.stringify (ARR));
 20 is              });
 21 is  
22 is              // 2. read data 
23 is              . $ ( '# the getData') ON ( 'the Click', function () {
 24                  the console.log (localStorage.getItem ( 'name' ));
 25                  Console.log(localStorage.getItem('address'));
26                 console.log(JSON.parse(localStorage.getItem('friends')));
27             });
28 
29             // 3. 删除数据
30             $('#clearData').on('click', function () {
31                 // sessionStorage.removeItem('name');
32                 // sessionStorage.removeItem('address');
33                 // 删除所有的
34                 localStorage.clear();
35             });
36 
37         });
38     </script>
39 </body>
40 </html>

Guess you like