标签：
一、Storage介绍
1、sessionStorage
session临时回话，从页面打开到页面关闭的时间段
窗口的临时存储，页面关闭，本地存储消失
<script> window.onload = function(){ var aInput = document.getElementsByTagName(‘input‘); aInput[0].onclick = function(){ //sessionStorage : 临时性存储 //localStorage : 永久性存储 //window.sessionStorage.setItem(‘name‘,aInput[3].value); window.localStorage.setItem(‘name‘,aInput[3].value);//key是name,value是最后一个输入框输入的内容 }; aInput[1].onclick = function(){ //alert(window.sessionStorage.getItem(‘name‘)); alert(window.localStorage.getItem(‘name‘)); }; aInput[2].onclick = function(){ window.localStorage.removeItem(‘name‘); //根据key删除相应的数据 //window.localStorage.clear(); //删除全部数据 }; }; </script> </head> <body> <input type="button" value="设置" /> <input type="button" value="获取" /> <input type="button" value="删除" /> <input type="text" /> </body>
保存用户注册信息案例
<script> window.onload = function(){ var aInput = document.getElementsByTagName(‘input‘); var oT = document.getElementById(‘t1‘); if( window.localStorage.getItem(‘name‘) ){ //先判断有没有name这个key相对应的value 如果有就直接赋值到输入框中 aInput[0].value = window.localStorage.getItem(‘name‘); } if( window.localStorage.getItem(‘sex‘) ){ for(var i=1;i<aInput.length;i++){ if( aInput[i].value == window.localStorage.getItem(‘sex‘) ){ aInput[i].checked = true; } } } if( window.localStorage.getItem(‘ta‘) ){ oT.value = window.localStorage.getItem(‘ta‘); } window.onunload = function(){ if( aInput[0].value ){ window.localStorage.setItem(‘name‘, aInput[0].value); } for(var i=1;i<aInput.length;i++){ if( aInput[i].checked == true ){ window.localStorage.setItem(‘sex‘, aInput[i].value); } } if( oT.value ){ window.localStorage.setItem(‘ta‘, oT.value); } }; }; </script> </head> <body> <p>用户名:<input type="text" /></p> <p> 性别 : <input type="radio" value="男" name="sex" />男 <input type="radio" value="女" name="sex" />女 </p> 内容 : <textarea id="t1"></textarea> </body>
<script> window.onload = function(){ var aInput = document.getElementsByTagName(‘input‘); aInput[0].onclick = function(){ window.localStorage.setItem(‘name‘,aInput[3].value); }; aInput[1].onclick = function(){ alert(window.localStorage.getItem(‘name‘)); }; aInput[2].onclick = function(){ window.localStorage.removeItem(‘name‘); }; window.addEventListener(‘storage‘,function(ev){ //当前页面的事件不会触发 //alert(123); console.log( ev.key ); console.log( ev.newValue ); console.log( ev.oldValue ); console.log( ev.storageArea ); console.log( ev.url ); },false); }; </script> </head> <body> <input type="button" value="设置" /> <input type="button" value="获取" /> <input type="button" value="删除" /> <input type="text" /> </body>
购物车同步案例（数据的同步更新）
标签：
原文地址：http://www.cnblogs.com/LO-ME/p/4598956.html
