本地存储 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.ο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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值