本地存储 web storage - 一头野码农_H5之家 - 中国HTML5教程资源分享第一站

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form> <input type="text" value="" placeholder="请输入用户名"/> <input type="button" value="保存" /> <input type="button" value="读取"/> <input type="button" value="删除"/> <input type="button" value="清除数据"/> </form> <script type="text/javascript"> //Web Storage是HTML5引入的一个非常重要的功能，在前端开发中经常用到，可以在客户端本地存储数据 //Web Storage分为两种： //sessionStorage 这个对象适合保存临时数据，因为如果浏览器一旦正常关闭这些数据也就被清除了 // localStorage 一直将数据保存在客户端本地，除主动删除数据，否则数据是永远不会过期的 //不管是sessionStorage，还是localStorage，可使用的API都相同，常用的有如下几个方法： //1. 保存数据：setItem( key, value ); //2.读取数据：getItem( key ); //3.删除单个数据：removeItem( key ); //4.删除所有数据：clear( ); //5.得到某个索引的key：如sessionStorage.key( index ); //6.表示key 的个数，也即 key长度: 如 localStorage.length; savebtn.onclick=function () { //判断当前浏览器是否支持Storage if (typeof(Storage)=='undefined'){ alert('当前浏览器不支持Storage'); return } //临时存储 // sessionStorage.setItem('userName',user.value) //永久储存 localStorage.setItem('userName',user.value) } getbtn.onclick=function () { // alert(sessionStorage.getItem('userName')) alert(localStorage.getItem('userName')) } removebtn.onclick=function () { localStorage.removeItem('userName') } clearbtn.onclick=function () { localStorage.clear(); } localStorage.setItem('clessName','h1610b') localStorage.setItem('num','502') localStorage.setItem('bc','superyu') console.log(localStorage); console.log(localStorage.length); //获取指定下标的key值 for(i=0;i<localStorage.length;i++){ console.log(localStorage.key(i)); } </script> </body> </html>