1.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="设置存储信息"> <input type="button" value="获取存储信息"> <input type="button" value="删除存储信息"><br> name:<input type="text"><br> pwd:<input type="text"> </body> <script> window.onload = function () { var aBtn = document.getElementsByTagName('input'); aBtn[0].onclick = function () {//设置本地存储 window.localStorage.setItem('name', aBtn[3].value);//永久存储 alert(aBtn[4].value) window.sessionStorage.setItem('pwd',aBtn[4].value);//临时存储 } //获取本地存储信息 aBtn[1].onclick = function () { alert("key为name的:"+window.localStorage.getItem('name')); alert("key为pwd的:"+window.sessionStorage.getItem('pwd')); } //删除本地存储信息 aBtn[2].onclick = function () { window.localStorage.removeItem('name'); window.localStorage.removeItem('pwd'); } } </script> </html>
2. 回显数据, 关闭浏览器的时候保存信息到本地,加载页面的时候加载本地信息
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数据回显</title> </head> <body> <p>用户名:<input type="text"></p> <p> 性别:<input type="radio" value="男" name="sex">男 性别:<input type="radio" value="女" name="sex">女 </p> 内容:<textarea name="content" id="content" cols="30" rows="10"></textarea> <input type="button" value="清除所有本地存储" id="btn1"> </body> <script> window.onload = function () { var aInput = document.getElementsByTagName('input') var oT = document.getElementById('content') var oBtn = document.getElementById('btn1') //先从本地去查询数据做回显 if (window.localStorage.getItem('name')){ aInput[0].value = window.localStorage.getItem('name'); } for (var i= 1; i < aInput.length; i++){ if (aInput[i].value == window.localStorage.getItem('sex')){ aInput[i].checked = true; } } if (window.localStorage.getItem('content')) { oT.value = window.localStorage.getItem('content'); } //关闭浏览器的时候保存数据到本地 window.onunload = function () { if (aInput[0].value){ window.localStorage.setItem('name', aInput[0].value); } for (var i= 0; i < aInput.length; i++){ if (aInput[i].checked){ window.localStorage.setItem('sex', aInput[i].value); } } if (oT.value){ window.localStorage.setItem('content', oT.value); } } oBtn.onclick = function () { window.localStorage.clear(); } } </script> </html>
3. 同步购物车 --- 测试不行,???
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>同步</title> </head> <body> <input type="checkbox" name="fruit" value="苹果">苹果<br> <input type="checkbox" name="fruit" value="梨子">梨子<br> <input type="checkbox" name="fruit" value="香蕉">香蕉<br> <input type="checkbox" name="fruit" value="菠萝">菠萝<br> <input type="checkbox" name="fruit" value="橙子">橙子<br> </body> <script> window.onload = function () { var aInput = document.getElementsByTagName('li'); for (var i = 0; i < aInput.length; i++) { aInput[i].onclick = function () { if (this.checked){ window.localStorage.setItem('sel', this.value); } else { window.localStorage.setItem('unsel', this.value); } }; } window.addEventListener('storage', function (ev) { if (ev.key == 'sel'){ for (var i = 0; i < aInput.length; i++){ if (ev.newValue == aInput[i].value){ aInput[i].checked = true; } } } else if (ev.key == 'unsel') { for (var i = 0; i < aInput.length; i++ ){ if (ev.newValue == aInput[i].value){ aInput[i].checked = false; } } } }) } </script> </html>