<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form> <input type="text" value="" id="user" placeholder="请输入用户名"/> <input type="button" name="" value="保存" id="savebtn" /> <input type="button" value="读取" id='getbtn'/> <input type="button" value="删除" id="removebtn"/> <input type="button" value="清除数据" id="clearbtn"/> </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.οnclick=function () { //判断当前浏览器是否支持Storage if (typeof(Storage)=='undefined'){ alert('当前浏览器不支持Storage'); return } //临时存储 // sessionStorage.setItem('userName',user.value) //永久储存 localStorage.setItem('userName',user.value) } getbtn.οnclick=function () { // alert(sessionStorage.getItem('userName')) alert(localStorage.getItem('userName')) } removebtn.οnclick=function () { localStorage.removeItem('userName') } clearbtn.οnclick=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>
转载于:https://www.cnblogs.com/Coding--Peasant/p/7050640.html