HTML5本地存储
一、Storage介绍
1、sessionStorage
session临时回话，从页面打开到页面关闭的时间段
窗口的临时存储，页面关闭，本地存储消失
2、localStorage
永久存储（可以手动删除数据）
二、Storage的特点
存储量限制 ( 5M )
客户端完成，不会请求服务器处理
sessionStorage数据是不共享、 localStorage共享
三、Storage API 基本方法使用
setItem():
设置数据，key\value类型，类型都是字符串
可以用获取属性的形式操作
getItem():
获取数据，通过key来获取到相应的value
removeItem():
删除数据，通过key来删除相应的value
clear():
删除全部存储的值
<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>
四、Storage API存储事件
–当数据有修改或删除的情况下，就会触发storage事件
–在对数据进行改变的窗口对象上是不会触发的（就是当前页面改变数据，当前页面不会触发，其他相关的页面会触发）
–Key : 修改或删除的key值，如果调用clear(),key为null
–newValue : 新设置的值，如果调用removeStorage(),key为null
–oldValue : 调用改变前的value值
–storageArea : 当前的storage对象
–url : 触发该脚本变化的文档的url
–注：session同窗口才可以,例子：iframe操作
<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>
购物车同步案例（数据的同步更新）
<script> window.onload = function(){ var aInput = document.getElementsByTagName('input'); 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('onSel',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 == 'onSel' ){ for(var i=0;i<aInput.length;i++){ if( ev.newValue == aInput[i].value ){ aInput[i].checked = false; } } } },false); }; </script> </head> <body> <input type="checkbox" value="香蕉" />香蕉<br /> <input type="checkbox" value="苹果" />苹果<br /> <input type="checkbox" value="西瓜" />西瓜<br /> <input type="checkbox" value="哈密瓜" />哈密瓜<br /> </body>
