localStorage 简单示例

HTML5 新增的JS API 都很实用，难能可贵的是它们都很接近自然语言的语法。

代码提示几乎就是它的文档了。

即使先前没有读过文档，单看代码提示就能明白它的各种方法如何使用了。

 

HTML：

 <div class="inp">

<input type="text" id="txt"><button id="save">保存</button><button id="del">清除</button>
</div>

<ol id="msgs">
    
</ol>

CSS：

*{ margin:0; padding:0;}
    .inp{ padding:10px;}
    .inp input{ padding:3px;}
    .inp input,.inp button{ margin-right:6px;}
    .inp button{ width:48px; height:24px; vertical-align:middle; text-align:center;}
    ol{ padding:10px;}
    ol li{ position:relative; border-bottom:1px solid #ddd; padding:0 0 6px 0; font-weight:100; list-style:decimal-leading-zero;}
    li p{ line-height:24px; font-size:14px; background:#f0f0f0; padding:0 5px;}

    li time{ font-size:11px; text-align:right;} 

JS： 

 var savebtn = document.querySelector('#save'),

        delbtn = document.querySelector('#del'),
        input = document.querySelector('#txt'),
        msgs = document.querySelector('#msgs');
    
    var saveData = function(){
        var data = input.value;
        if(!data) return;
        var t = '' +new Date;
        window.localStorage.setItem(t,data);
        var msg = [],itm = document.createElement('li');
        msg.push('<p>'+ data + '</p><time>' + new Date(t) + '</time>' );
        itm.innerHTML = msg.join('');
        msgs.insertBefore(itm,msgs.firstChild);
        };
        
    
    
    var initData = function(){
        var msg = [];
        for(var i=0; i<window.localStorage.length; i++){
            
            var t = localStorage.key(i),
                v = localStorage.getItem(t);
                
            msg.push('<li><p>'+ v + '</p><time>' + new Date(t) + '</time></li>' );
            
            }
            
        msgs.innerHTML = msg.join('');    
        };    
        
    var delData = function(){
        //alert(window.localStorage.length)
        if(window.confirm('您确定要删除本地存储信息么?')){
            
            for(var i=0; i<window.localStorage.length; i++){
                var key = localStorage.key(i);
                localStorage.removeItem(key);
                }
            initData();        
            }
        
        };        
    
    initData();
    
    savebtn.addEventListener('click',saveData,false);
    delbtn.addEventListener('click',delData,false);