localStorage 简单示例

最新推荐文章于 2024-10-24 21:27:50 发布

转载最新推荐文章于 2024-10-24 21:27:50 发布 · 108 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/trance/archive/2012/07/19/2599426.html

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

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

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

HTML：

< 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);

转载于:https://www.cnblogs.com/trance/archive/2012/07/19/2599426.html