<!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>,而且不报错???



雷达卡










京公网安备 11010802022788号







