当前位置：网站首页>Write a simple memo using localstorage

Write a simple memo using localstorage

2022-07-24 09:30:00 【51CTO】

Use html+js Implement a simple memo , Mainly experience localStorage Usage of .

Let's see the renderings first ：

Use localStorage Write a simple memo _jquery

Enter text in the input box , Click the save button , The text content will be displayed below ,

Then refresh the browser , You will find that the text content will not be lost , This is because the text content is saved to localStorage It's in ,

It can be understood as saved to the browser Cookie in . Click again " Empty local storage ", You will find that the text below is gone .

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

Code ：

      
      

       
       1 <!DOCTYPE html>
       
       
 2 <html lang="en">
       
       
 3 <head>
       
       
 4     <meta charset="UTF-8">
       
       
 5     <title>HTML5- Task list </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=" preservation "/>
       
       
12     <input id="clearMsg" type="button" value=" Empty local storage "/>
       
       
13     <p style="color: #286090;font-size: 20px;"> Task list </p>
       
       
14     <hr/>
       
       
15     <div id="todoList"></div>
       
       
16 </div>
       
       
17 <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
       
       
18 <script>
       
       
19     //  Load task list from local storage 
       
       
20     var msgList = localStorage.getItem("msgList");
       
       
21 
       
       
22     if (msgList !== null && msgList !== undefined && msgList != '') {
       
       
23         //  Show the task list 
       
       
24         document.getElementById("todoList").innerHTML = msgList;
       
       
25     }
       
       
26     //  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 enter the task ")
       
       
31             return;
       
       
32         }
       
       
33         var todoMsgHtml = '<h5><span style="color: red"> Mission :</span>' + todoMsg + '</h5>';
       
       
34         //  Append to task list 
       
       
35         msgList = (msgList == null ? '' : msgList) + todoMsgHtml;
       
       
36         localStorage.setItem("msgList", msgList);
       
       
37         //  Refresh the task list 
       
       
38         document.getElementById("todoList").innerHTML = msgList;
       
       
39     });
       
       
40     //  Empty the task list and refresh the browser 
       
       
41     $("#clearMsg").click(function () {
       
       
42         localStorage.clear();
       
       
43         document.getElementById("clearMsg").innerHTML = "";
       
       
44         location.reload();
       
       
45     });
       
       
46 </script>
       
       
47 </body>
       
       
48 </body>
       
       
49 </html>
      
      

      
      
    
       
       
  • 1.
    • 
       
       
  • 2.
    • 
       
       
  • 3.
    • 
       
       
  • 4.
    • 
       
       
  • 5.
    • 
       
       
  • 6.
    • 
       
       
  • 7.
    • 
       
       
  • 8.
    • 
       
       
  • 9.
    • 
       
       
  • 10.
    • 
       
       
  • 11.
    • 
       
       
  • 12.
    • 
       
       
  • 13.
    • 
       
       
  • 14.
    • 
       
       
  • 15.
    • 
       
       
  • 16.
    • 
       
       
  • 17.
    • 
       
       
  • 18.
    • 
       
       
  • 19.
    • 
       
       
  • 20.
    • 
       
       
  • 21.
    • 
       
       
  • 22.
    • 
       
       
  • 23.
    • 
       
       
  • 24.
    • 
       
       
  • 25.
    • 
       
       
  • 26.
    • 
       
       
  • 27.
    • 
       
       
  • 28.
    • 
       
       
  • 29.
    • 
       
       
  • 30.
    • 
       
       
  • 31.
    • 
       
       
  • 32.
    • 
       
       
  • 33.
    • 
       
       
  • 34.
    • 
       
       
  • 35.
    • 
       
       
  • 36.
    • 
       
       
  • 37.
    • 
       
       
  • 38.
    • 
       
       
  • 39.
    • 
       
       
  • 40.
    • 
       
       
  • 41.
    • 
       
       
  • 42.
    • 
       
       
  • 43.
    • 
       
       
  • 44.
    • 
       
       
  • 45.
    • 
       
       
  • 46.
    • 
       
       
  • 47.
    • 
       
       
  • 48.
    • 
       
       
  • 49.
    •

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

summary ： Simple function , Main experience localStorage Usage of .

Next, I plan to write a beautiful task Kanban and put it on ECS for free trial , Create tasks quickly without logging in ( Browser based Cookie Storage ),

At the same time, it has wechat scanning code login function , The task can be synchronized to the server and saved permanently , You can also export the task list to the local disk with one click .

 



原网站

版权声明
本文为[51CTO]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/204/202207221532345361.html

边栏推荐

猜你喜欢

随机推荐