Use localStorage write a simple memo

Use html + js achieve a simple memo, the main taste localStorage usage.

Take a look at renderings:

--------------------------------------------------------------------------------------

Code:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>HTML5-任务列表</title>
 6 </head>
 7 <body>
 8 <body>
 9 <div>
10     <input id="todoMsg" type="text" width='200'></input>
11     <input id="saveMsg" type="button" value="保存"/>
12     <input id="clearMsg" type="button" value="清空本地存储"/>
13     <p style="color: #286090;font-size: 20px;">任务列表</p>
14     <hr/>
15     <div id="todoList"></div>
16 </div>
17 < Script the src = "https://code.jquery.com/jquery-1.11.1.js" > </ Script > 
18 is  < Script > 
. 19      // from the local store to load the task list 
20 is      var msgList = localStorage.getItem ( " msgList " );
 21 is  
22 is      IF (msgList ! ==  null  && msgList ==! undefined && msgList =!  '' ) {
 23 is          // display the task list 
24          document.getElementById ( "todoList") .innerHTML = msgList;
 25      }
 26 is      // add and save a single task 
27      $ ( " #saveMsg " ) .click ( function () {
 28          var todoMsg = document.getElementById ( " todoMsg " ) .Value;
 29          IF (todoMsg ==  null  || todoMsg ==  '' ) {
 30              Alert ( " Please input task " )
 31 is              return ;
 32          }
 33 is         var todoMsgHtml =  ' <H5> <span style = "Color: Red"> Task: </ span> '  + todoMsg +  ' </ H5> ' ;
 34 is          // added to the task list 
35          msgList = (msgList ==  null  ?  '' : msgList) + todoMsgHtml;
 36          localStorage.setItem ( " msgList " , msgList);
 37 [          // refresh the task list 
38 is          document.getElementById ( " ToDoList " ).innerHTML = msgList;
39      });
 40      // empty list of tasks and refresh the browser 
41 is      $ ( " #clearMsg " ) .click ( function () {
 42 is          localStorage.clear ();
 43 is          document.getElementById ( " clearMsg " ) .innerHTML =  "" ;
 44 is          location.reload ();
 45      });
 46 is  </ Script > 
47  </ body > 
48  </ body > 
49  </ HTML >

------------------------------------------------------------------------------------------------------

Summary: features simple, localStorage under the main usage experience.

Next task Kanban going to write a beautiful point into the cloud server to give you a free trial, you can quickly create a task without logging (browser-based Cookie storage),

Along with micro-channel scan code login feature, the task can be saved permanently synchronized to the server, you can also list a key export tasks to the local disk.

Use localStorage write a simple memo

Guess you like