<!DOCTYPE html> <html> <head> <title>ch05_01</title> <link rel="stylesheet" type="text/css" href="color.css"> <script type="text/javascript"> function onLoad(){ if(typeof(Storage)=="undefined") { alert("Sorry!!Your browser dont support Web Storage!"); } else { btn_save.addEventListener("click", saveToLocalStorage); btn_load.addEventListener("click", loadFromLocalStorage); } } function saveToLocalStorage(){ localStorage.username = inputname.value; } function loadFromLocalStorage(){ show_LocalStorage.innerHTML = localStorage.username + " Hello~ Welcome to my web site!"; } </script> </head> <body> <body> <img src="images/welcome.jpg" /> <br /> 请输入你的姓名:<input type="text" id="inputname" value=""> <br /> <div id="show_LocalStorage"> </div> <br /> <button id="btn_save">存储到localStorage</button> <button id="btn_load">从localStorage读取数据</button> </body> </body> </html>
已调试运行,理解了其中绕来绕去的思路。整理如下:
body这里是入口,onload就是网页打开的时候,就跑到上面去装载(在head里面的script里),它判断Storage有没有
没有就会警告。意思是,一上来就得判断你到底在不在。
如果在,就开始监听你按没有按 那两个按钮(存储、显示 localStorage内容的按钮)
这两个按钮,是在网页上给出的(btn_save btn_load)
如果点了 btn_save,它就帮你把输入框的内容放到你的浏览器规定位置,也就是localStorage
如果点了 btn_load,它就帮你读出来,显示到一个取了名字的div中去,div必须用innerHTML,避免里面有网页标记什么的。
就是这样
一个疑问:为什么<body>里还可以再加一个<body>,而且不报错???
请注明:姓名-公司-职位
以便审核进群资格,未注明则拒绝