本地存储 web storage
<!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.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>

来源:itnose

上一篇: Web前端面试指导(十九):CSS样式-如何清除元素浮动?

下一篇: 一篇文章带你快速入门createjs

分享到: 更多