<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus?"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> </head> <body> <div id="msg"></div> <input type="text" id="msgtxt"/> <button id="savemsg" onclick="savemsg('msgtxt')">保存</button> <button id="showmsg" onClick="showmsg('msg')">显示</button> <button id="removeBtn" onClick="removeKey('key')">删除</button> </body> <script> function savemsg(id){ var savemsg = document.getElementById(id); var msg=savemsg.value; for(var i=0;i<100;i++) { // 循环存储值，并动态添加键值对 localStorage.setItem("message"+i,msg+"-"+i); } } function showmsg(id){ // 显示数据到 Div var showmsg= document.getElementById(id); for(var i=0;i<100;i++) { showmsg.innerHTML+=localStorage.getItem("message"+i) + " "; } } function removeKey(key){ for(var i=0;i<100;i++) { // 查找键值对删除 localStorage.removeItem("message"+i); } //localStorage.clear(); 删除所有 } </script> </html> localStorage.setItem("message"+i,msg+"-"+i); } } function showmsg(id){ // 显示数据到 Div var showmsg= document.getElementById(id); for(var i=0;i<100;i++) { showmsg.innerHTML+=localStorage.getItem("message"+i) + " "; } } function removeKey(key){ for(var i=0;i<100;i++) { // 查找键值对删除 localStorage.removeItem("message"+i); } //localStorage.clear(); 删除所有 } </script> </html>
效果图:
html开发视频 https://download.csdn.net/download/taoerit/12366310
