本地存儲 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

分享到: 更多
重庆时时历史开奖记录 篮球比分直播 北京pk赛车直播开奖视频 老时时彩走势图五星 pk10玩法简单技巧 幸运pc28加拿大结果参考 七星彩大公鸡下载 10码复式二中二多少组 扫码赚钱的软件 国彩网官方网站 不倒翁对冲的投注法 时时彩为什么改为20分钟 四川时时开奖号码查询 七星彩计划最新版 幸运飞艇单双怎么玩 麻将游戏下载手机版